看到一遍文章
when innerhtml isn』t fast enough，反應了innerhtml在操作量大了以後的效能下降的問題。
並且給出了乙個replacehtml的函式
js**
function replacehtml(el, html) ;
function replacehtml(el, html) ;用這個函式來代替innerhtml後在不同瀏覽器中的效能表現為：
safari 3:
5000 elements…
innerhtml (destroy only): 63ms
innerhtml (create only): 390ms
innerhtml (destroy & create): 484ms
replacehtml (destroy only): 47ms (1.3x faster)
replacehtml (create only): 15ms (26.0x faster)
replacehtml (destroy & create): 62ms (7.8x faster)
done.
10000 elements…
innerhtml (destroy only): 110ms
innerhtml (create only): 3500ms
innerhtml (destroy & create): 4735ms
replacehtml (destroy only): 110ms (~ same speed)
replacehtml (create only): 31ms (112.9x faster)
replacehtml (destroy & create): 141ms (33.6x faster)
done.
firefox 3:
5000 elements…
innerhtml (destroy only): 863ms
innerhtml (create only): 522ms
innerhtml (destroy & create): 1421ms
replacehtml (destroy only): 20ms (43.1x faster)
replacehtml (create only): 225ms (2.3x faster)
replacehtml (destroy & create): 239ms (5.9x faster)
done. 10000 elements…
innerhtml (destroy only): 5521ms
innerhtml (create only): 2626ms
innerhtml (destroy & create): 8528ms
replacehtml (destroy only): 39ms (141.6x faster)
replacehtml (create only): 373ms (7.0x faster)
replacehtml (destroy & create): 422ms (20.2x faster)
done.
opera 9.5:
5000 elements…
innerhtml (destroy only): 16ms
innerhtml (create only): 141ms
innerhtml (destroy & create): 94ms
replacehtml (destroy only): 16ms (~ same speed)
replacehtml (create only): 78ms (1.8x faster)
replacehtml (destroy & create): 125ms (1.3x slower)
done.
10000 elements…
innerhtml (destroy only): 31ms
innerhtml (create only): 156ms
innerhtml (destroy & create): 312ms
replacehtml (destroy only): 31ms (~ same speed)
replacehtml (create only): 203ms (1.3x slower)
replacehtml (destroy & create): 157ms (2.0x faster)
done.
ie7:
1000 elements…
innerhtml (destroy only): 0ms
innerhtml (create only): 0ms
innerhtml (destroy & create): 0ms
replacehtml (destroy only): 0ms (~ same speed)
replacehtml (create only): 0ms (~ same speed)
replacehtml (destroy & create): 0ms (~ same speed)
done.
15000 elements…
innerhtml (destroy only): 31ms
innerhtml (create only): 156ms
innerhtml (destroy & create): 172ms
replacehtml (destroy only): 32ms (~ same speed)
replacehtml (create only): 157ms (~ same speed)
replacehtml (destroy & create): 188ms (1.1x slower)
done.
似乎在ie上沒有什麼改進，但是在其它瀏覽器上效果明顯。
經常使用的prototype.js裡是呼叫element.update(element,content)來完成innerhtml操作的，開啟prototype.js檔案，修改update的部分
js**
update: function(element, content) ,
update: function(element, content) ,用replacehtml函式代替element.innerhtml = content.stripscripts();這行就可以了。
js**
update: function(element, content) ,
update: function(element, content) ,
關於InnerHTML存在的問題
當 html 字串包含乙個標記為 defer 的 script 標籤 時，如 innerhtml 屬性處理不當，在 internet explorer 上會引起指令碼注入攻擊。設定 innerhtml 將會破壞現有的已註冊了事件處理函式的 html 元素，會在某些瀏覽器上引起記憶體洩露的潛在危險。還...
innerHTML的乙個奇怪問題
背景 使用ajax翻頁 起初 是這樣的 頁面 include cn videoplay comment listcomment.ftl ajax comment innerhtml originalrequest.responsetext 在firefox下是好的，在ie下頁面會掛在那不動，經檢測a...
innerHTML的乙個奇怪問題
背景 使用ajax翻頁 起初 是這樣的 頁面 include cn videoplay comment listcomment.ftl ajax comment innerhtml originalrequest.responsetext 在firefox下是好的，在ie下頁面會掛在那不動，經檢測a...