innerHTML和W3C之DOM在剧本编程中的中庸之道

这篇文章并非关于innerHTML和W3C的DOM要领孰优孰劣的口水战。关于它们的PK在许多伴侣的文章中都已经可以清算为出色的小说，这里就不再为故事添加情节。

本文阅网博客要给各人分享的内容是，在前端应用中若涉及大量元素elements操纵，怎样来更好整合行使innerHTML和DOM要领，以使页面的剧本执行服从可以或许隐藏地晋升数百倍，比纯真行使innerHTML或DOM要领在赏识器机能实践、拭魅战PK中，在速率方面实其着实地晋升到极致。

在一些赏识器中，尤其是在常用的Firefox火狐赏识中，尽量innerHTML一样平常要比DOM要领执行速率要快许多，可是innerHTML在烧毁已经存在的元素方面所耗损的时刻确实示意不佳，innerHTML在建设元素时的速率和在烧毁元素时的速率是不成比例的。搞清晰这一点往后，我们思量可以实行整合行使DOM要领烧毁元素（通过尺度DOM要领移除待烧毁内容的父节点）的牛叉速率，与行使innerHTML建设新元素的牛叉速率。（这种技能在在做一个正则表达式应用的时辰发明的，是机能晋升的重要设施之一。）

代码如下：

1.
function replaceHtml(el, html) {
2.
var oldEl = typeof el === “string” ? document.getElementById(el) : el;
3.
/*@cc_on // 纯真innerHTML在IE中会轻微更快一些
4.
oldEl.innerHTML = html;
5.
return oldEl;
6.
@*/
7.
var newEl = oldEl.cloneNode(false);
8.
newEl.innerHTML = html;
9.
oldEl.parentNode.replaceChild(newEl, oldEl);
10.
/* 由于我们只是从DOM中移除旧元素，以是返回一个新元素引用用作规复 */
11.
return newEl;
12.
};

在项目中，就可行使上面的 el = replaceHtml(el, newHtml)更换el.innerHTML = newHtml。

我以为innerHTML已经够快了，…真的有须要这样做吗?？

这个题目依靠于您要重写几多个元素elements了。在我曾经的一个开拓中，每按下一个键，乃至也许就触发了烧毁并建设数以千记的元素（为了页面表现内容的切合前提下自动变革）。在这种气象下，上面讲到的要领就有庞大的起劲影响、改造结果相等明明。假如您偶尔呈现一次要更新有几千子节点的环境，乃至像 el.innerHTML += str可能el.innerHTML = “”这么简朴的写法就也许带来劫难性的效果。

究竟胜于雄辩。为利便各人测试，阅网建设了一个测试页面，让各人可以当即、利便地举办测试innerHTML和上面整合的replaceHtml要领的机能差别，测试包括了差异数目的元素。测试的时刻，请在一些主流赏识器举办测试，如常见的火狐、IE赏识器等，在差异的赏识器下的测试功效亲身做下比拟。

点此进进入测试页面，亲身材验差异赏识器下俩个要领的机能差别，点此开始测试把~！:)

1000 元素elements…
innerHTML (destroy only): 156ms
innerHTML (只建设元素): 15ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 0ms (速率很快)
replaceHtml (create only): 15ms (~ 速率沟通)
replaceHtml (destroy & create): 15ms (11.5x 速率很快)

15000 元素elements…
innerHTML (只烧毁元素): 14703ms
innerHTML (只建设元素): 250ms
innerHTML (烧毁并建设元素): 14922ms
replaceHtml (只烧毁元素): 31ms (474.3倍 速率很快)
replaceHtml (只建设元素): 250ms (~ 速率沟通)
replaceHtml (烧毁并建设元素): 297ms (50.2x 速率很快)

俗话说：数字本身会措辞，你懂的。在Safari赏识器中同样可以看到机能的大幅度晋升。在Opera中速率比拟replaceHtml比 innerHTML仍旧要快！在IE赏识器中，纯真行使innerHTML会比replaceHtml轻微快一点，但差别及其小，但 replaceHtml行使IE的hacker成果（仅IE赏识器才会执行的代码）来停止这种渺小的速率丧失，使得在各类赏识器中的示意都越发彪悍。

总结下，剧本编程中重在实践，在不绝的测试中获得手艺和履历的慢慢晋升，从而在前段开拓中可以或许做到游刃有余，娴然缓步于互联网前段之路。

来历：http://www.6e6.org/post/49.html

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!