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

我对 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 大师/上帝能够在这里点亮希望之光并帮助我们解决这个问题。

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

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

W3C http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-B63ED1A3关于 documentFragments 的文档非常模糊，但很重要，而且每个人最喜欢的浏览器并不使用真正的片段，而是根据这个 MSDN 文档 http://msdn.microsoft.com/en-us/library/ms536387%28VS.85%29.aspx。这意味着 IE 上的片段速度较慢。

那么，问题就来了，如果我创建一个元素 (a <div>例如）在变量中但不要将其附加到 DOM，添加元素（div、表格等）以及所有工作完成后（循环、验证、元素样式），该元素被附加，它与片段相同吗？

文档片段 is 快多了当它用于插入一个元素集 in 多个地方。这里的大多数答案都指出了它的无用，但这是为了证明它的力量。

让我们举个例子。

假设我们需要附加20 divs in 10个元素与类容器.

Without:

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));
}

With:

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 倍。

在 JsPerf 上测试 http://jsperf.com/document-fragment-test-peluchetti/38