通过 Dom 方法提高 innerHTML 性能,性能不升反降?

 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的性能~

发表评论

Your email is never shared. Required fields are marked *

*
*