【问题标题】：IE9+: poor performance while dealing with DOMIE9+：处理 DOM 时性能不佳
【发布时间】：2011-11-24 06:39:26
【问题描述】：

与其他浏览器相比，IE9 执行this script (for dynamic manipulation of DOM) 的运行时间非常长。我好奇;它会以何种方式影响下一代富应用程序的执行速度？除了这个迭代测试之外，是否有任何相关的真实世界 webapp 示例，我们可以在其中观察性能差异？还有，是他们的JS引擎的问题还是Layout引擎的问题？

更新：

问题已在 IE10 RTM 中得到解决。

【问题讨论】：

IE10 预览并不快，FWIW
我同意！这是性能不佳的非常奇怪和极好的例子（Safari 约 0.140 秒 vs 约 44 秒）。我想知道它会对现实世界和下一代富 Web 应用程序产生怎样的影响以及影响有多大？所以我们可以在考虑对 IE9+ 浏览器的支持的同时设计好的做法。
@DaveMarkle，这个问题在 IE10 RTM 中得到了解决。

标签： javascript html performance internet-explorer web-applications

【解决方案1】：

用途：

function testAppendFrag(div) {
    var docFrag=document.createDocumentFragment(),i=count;
    while(i--){
        docFrag.appendChild(document.createElement("div"));
    }
    div.appendChild(docFrag.cloneNode(true));
}

【讨论】：

使用文档片段会显着改进代码。
谢谢。事实上，性能问题不在于 testAppend 函数。如果您可以详细说明 testRemoveFrag 函数的实现，将会非常有帮助。 :-)
@vulcan 从 DOM 中分离 DIV。删除子元素。将 DIV 附加回 DOM。这个想法是执行 DOM 操作“off-DOM”，因此，尽可能少地接触实时 DOM。
谢谢，这当然是有道理的。您能否解释一下，其他浏览器供应商，如 Firefox，如何能够在没有文档片段的情况下更快地执行相同的代码（速度差异很大）？他们是自动进行这种碎片化，还是使用了其他技术？
@ŠimeVidas，我在使用 DocumentFragment 的页面上使用了Compact Inspector，它给了我这个错误：Document fragments no longer expose Document APIs. This is a deliberate change in IE9 mode and up for interoperability with other browsers and compliance with DOM Level 3 Core. Resolution: • If querying for elements, use an alternative API likequerySelectorAll• Otherwise, use a full Document instance instead of a DocumentFragment