通过 Dom 方法提高 innerHTML 性能，性能不升反降？

FoxLing — Thu, 25 Dec 2008 22:37:12 +0000

 function replaceHtml(el, html) {
     var oldEl = typeof el === "string" ? document.getElementById(el) : el;
     /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
         oldEl.innerHTML = html;
         return oldEl;
     @*/
     var newEl = oldEl.cloneNode(false);
     newEl.innerHTML = html;
     oldEl.parentNode.replaceChild(newEl, oldEl);
     /* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/
     return newEl;
 };

在怿飞的Blog上看到这篇文章，里面有提到“此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。”

于是在FireFox3.05里测试了一下，循环50000次的结果，直接innerHTML是2000ms左右，而上面的函数需要3300ms左右，不知道是我的测试方法有误，还是新版的FireFox改善了innerHTML的性能~

FoxLing - 前端开发 » innerHTML

通过 Dom 方法提高 innerHTML 性能，性能不升反降？