innerHTML的性能问题

在日常开发中，我们发现innerHTML方法比直接操作DOM节点要快得多，这已经不需要专门讨论了。然而innerHTML是不是足够快呢？

 

最近读到一篇blog， When innerHTML isn't Fast Enough 。文中就讨论了这个问题。文章的观点是，对于大量节点 ，使用innerHTML=""的方法删除节点性能不如直接用DOM操作。

 

基于这个思路，作者认为“删除元素时使用标准DOM方法销毁它们的父对象，创建元素时使用innerHTML。两者结合使用更快”。并且写了一个replaceHtml的方法：

function replaceHtml(el, html) { var oldEl = typeof el === "string" ? document.getElementById(el) : el; /*@cc_on // Pure innerHTML is slightly faster in IE oldEl.innerHTML = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl.innerHTML = html; oldEl.parentNode.replaceChild(newEl, oldEl); /* Since we just removed the old element from the DOM, return a reference to the new element, which can be used to restore variable references. */ return newEl; };

 

可以直接用el=replaceHtml(el, newHtml)代替el.innerHTML=newHtml。

 

速度到底有多大提升，还得测试说话。作者提供了一个测试页面：http://stevenlevithan.com/demo/replaceHtml.html

分别测试100，1000，2500，5000，10000，15000个元素的操作。在我的机器结果如下：

 

IE7.0：

100 elements...
innerHTML (destroy only): 0ms
innerHTML (create only): 2ms
innerHTML (destroy & create): 1ms
replaceHtml (destroy only): 1ms (~ same speed)
replaceHtml (create only): 2ms (~ same speed)
replaceHtml (destroy & create): 2ms (~ same speed)
Done.

---

1000 elements...
innerHTML (destroy only): 1ms
innerHTML (create only): 10ms
innerHTML (destroy & create): 12ms
replaceHtml (destroy only): 2ms (~ same speed)
replaceHtml (create only): 10ms (~ same speed)
replaceHtml (destroy & create): 12ms (~ same speed)
Done.

---

2500 elements...
innerHTML (destroy only): 5ms
innerHTML (create only): 24ms
innerHTML (destroy & create): 29ms
replaceHtml (destroy only): 6ms (~ same speed)
replaceHtml (create only): 25ms (~ same speed)
replaceHtml (destroy & create): 29ms (~ same speed)
Done.

---

5000 elements...
innerHTML (destroy only): 10ms
innerHTML (create only): 47ms
innerHTML (destroy & create): 56ms
replaceHtml (destroy only): 11ms (~ same speed)
replaceHtml (create only): 47ms (~ same speed)
replaceHtml (destroy & create): 56ms (~ same speed)
Done.

---

10000 elements...
innerHTML (destroy only): 28ms
innerHTML (create only): 97ms
innerHTML (destroy & create): 122ms
replaceHtml (destroy only): 22ms (1.3x faster)
replaceHtml (create only): 95ms (~ same speed)
replaceHtml (destroy & create): 115ms (1.1x faster)
Done.

---

15000 elements...
innerHTML (destroy only): 31ms
innerHTML (create only): 152ms
innerHTML (destroy & create): 181ms
replaceHtml (destroy only): 33ms (~ same speed)
replaceHtml (create only): 153ms (~ same speed)
replaceHtml (destroy & create): 181ms (~ same speed)
Done.

 

 

Firefox 3.01

100 elements...
innerHTML (destroy only): 2ms
innerHTML (create only): 2ms
innerHTML (destroy & create): 4ms
replaceHtml (destroy only): 3ms (~ same speed)
replaceHtml (create only): 4ms (~ same speed)
replaceHtml (destroy & create): 4ms (~ same speed)
Done.

---

1000 elements...
innerHTML (destroy only): 29ms
innerHTML (create only): 30ms
innerHTML (destroy & create): 59ms
replaceHtml (destroy only): 4ms (7.3x faster)
replaceHtml (create only): 16ms (1.9x faster)
replaceHtml (destroy & create): 19ms (3.1x faster)
Done.

---

2500 elements...
innerHTML (destroy only): 174ms
innerHTML (create only): 114ms
innerHTML (destroy & create): 289ms
replaceHtml (destroy only): 8ms (21.8x faster)
replaceHtml (create only): 40ms (2.9x faster)
replaceHtml (destroy & create): 47ms (6.1x faster)
Done.

---

5000 elements...
innerHTML (destroy only): 1247ms
innerHTML (create only): 510ms
innerHTML (destroy & create): 1742ms
replaceHtml (destroy only): 18ms (69.3x faster)
replaceHtml (create only): 86ms (5.9x faster)
replaceHtml (destroy & create): 97ms (18.0x faster)
Done.

---

10000 elements...
innerHTML (destroy only): 7824ms
innerHTML (create only): 3926ms
innerHTML (destroy & create): 12259ms
replaceHtml (destroy only): 66ms (118.5x faster)
replaceHtml (create only): 179ms (21.9x faster)
replaceHtml (destroy & create): 203ms (60.4x faster)
Done.

---

15000 elements...
innerHTML (destroy only): 20261ms
innerHTML (create only): 12294ms
innerHTML (destroy & create): 31964ms
replaceHtml (destroy only): 36ms (562.8x faster)
replaceHtml (create only): 227ms (54.2x faster)
replaceHtml (destroy & create): 265ms (120.6x faster)
Done.

可见在Firefox下，操作超过1000个元素时性能有显著提升。而IE则没有效果。因此本方法还是值得使用的。