javascript - 使用文档片段真的能提高性能吗？

Question

我对 JS 的性能有疑问。

说，我有下一个代码:

var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
document.getElementById("someElement").appendChild( divContainer );

这段代码只是为一些其他函数创建了 shell 来创建一个网格，创建网格的过程非常复杂并且有很多验证，目前我正在使用 2 种方法来填充网格，一种是在中创建整个 html一个数组变量，另一个创建元素并将它们附加到 documentFragment .

我的问题是，根据我的理解，使用片段时是否真的会提高性能 - 它们管理内存中的元素，因此它们不会附加到文档，因此不会触发 DOM 重新计算和其他讨厌的事情。但是我创建变量的方式，在我将容器附加到实际页面之前，它们不会附加到任何 DOM 元素。

所以我想知道以前的代码是否比使用像这样包装它的文档片段具有更好的性能:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div"); divContainer.id="container";
var divHeader = document.createElement("div"); divHeader.id="header";
var divData = document.createElement("div"); divData.id="data";
var divFooter = document.createElement("div"); divFooter.id="footer";
divContainer.appendChild( divHeader );
divContainer.appendChild( divData );
divContainer.appendChild( divFooter );
fragment.appendChild( divContainer )
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );

正如我已经说过的，这是一个关于性能的问题，我知道作为最佳实践，建议使用片段，但我不能忘记这样做只会创建一个新对象在内存中并且什么都不做，所以我假设在这种情况下放弃片段是有效的。

希望一些 js 大师/上帝能在这里点亮希望之光并帮助我们解决这个问题。

---

编辑:所以，我一直在寻找与这个问题相关的东西，似乎 documentFragments 并不一定意味着更好的性能。

它只是节点的“内存中”容器。片段和说 <div> 之间的区别是片段没有父级，它永远不会在 DOM 上，只是在内存中，这意味着在片段上进行的操作更快，因为没有对 DOM 的操作。

W3C关于 documentFragments 的文档非常模糊，但切中要点，而且，每个人最喜欢的浏览器都不使用真正的片段，而是根据 this MSDN documentation 创建一个新文档。 .这意味着，IE 上的片段速度较慢。

所以，问题很普遍，如果我创建一个元素(例如 <div>)在变量中但不要将其附加到 DOM，添加元素(div、表格等)和东西，在完成所有工作之后(循环、验证、元素样式)，追加的元素是否与一个片段？

考虑到 IE 使用“假”片段这一事实我会说至少在 IE 中使用这种方法(使用诸如 div 之类的元素，而不是片段)更好，我真的不关心 IE 但我需要测试它(办公室的政策)。

此外，如果我像这样在数组上创建所有 html:

var arrHTML = ["<table>","<tr>", ....]; 

然后这样做

document.getElementById("someElement").innerHTML = arrHTML.join(""); 

在 IE 上速度更快，但其他主要浏览器(FF、Chrome、Safari 和 Opera)在使用容器然后附加它(片段或 div)时性能更好。

所有这一切都是因为创建所有元素的过程非常快，大约 8 到 10 秒即可创建多达 20,000 行和 24 列，它有很多元素/标签，但浏览器似乎卡住了一个几秒钟后一次全部附加，如果我尝试一个一个地附加它们，那就太糟糕了。

再次感谢大家，这真的很有趣。

Answer 1

Document Fragment 用于在多个位置插入一组元素时快得多。这里的大多数答案都指出它的无用性，但这是为了展示它的强大。

让我们举个例子。

假设我们需要在 10 个元素 中附加 20 个 div 类容器。

没有:

var elements = [];
for(var i=20; i--;) elements.push(document.createElement("div"));

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) {
  for(var j=20; j--;) e[i].appendChild(elements[j].cloneNode(true));
}

与:

var frag = document.createDocumentFragment();
for(var i=20; i--;) frag.appendChild(document.createElement("div"));

var e = document.getElementsByClassName("container");
for(var i=e.length; i--;) e[i].appendChild(frag.cloneNode(true));

对我来说，在 Chrome 48 上使用文档片段的速度提高了 16 倍。

Test on JsPerf