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

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来创建一个网格，创建网格的过程非常复杂并且有很多验证，目前我正在使用两种方法来填充网格，一种是在其中创建整个 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 上的 Fragment 速度较慢。

所以，问题是，如果我创建一个元素（例如 <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 秒来创建多达 24 列的 20,000 行，这是很多元素/标签，但浏览器似乎冻结了几秒钟后它们都被一次附加，如果我尝试一个接一个地附加它们，那就太糟糕了。

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

Answer 1

文档片段在多个位置插入元素集时快得多。这里的大多数答案都指出它没有用处，但这是为了展示它的力量。

举个例子。

假设我们需要在 10 个元素 中添加 20 个 div 类 container。

没有：

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

Answer 2

通常您希望使用片段来避免重排（重新绘制页面）。一个很好的情况是，如果您在循环中循环某些内容并在循环中追加内容，但是，我认为现代浏览器已经对此进行了优化。

我设置了一个 jsPerf 来说明何时使用片段 here 的一个很好的例子。您会注意到在 Chrome 中几乎没有区别（我认为现代优化在起作用），但是，在 IE7 中，我得到 0.08 ops/sec（没有片段），3.28 ops/sec（有片段）。

因此，如果您要遍历一个大型数据集并附加大量元素，请改用片段，这样您就只有一个重排。如果您只是向 dom 附加了几次，或者您只是针对现代浏览器，则没有必要。

Answer 3

我写了一个jspref来测试它，节点片段似乎快了2.34%

http://jsperf.com/document-fragment-test-peluchetti

Answer 4

根据我的经验，dom 操作通常仅在调用堆栈为空后发生。如果我将很多 dom 操作放在循环中，浏览器会冻结一段时间，然后立即显示所有内容。如果需要，您可以使用 setTimeout 更频繁地显示结果来打破堆栈。出于这个原因，我相信这两种方法的表现应该相似。有时这实际上很奇怪，因为如果在一个堆栈中更改了某个元素，则在更改之前您将永远看不到它的状态（进度通知对象有这个问题，在循环期间从未更新过 innerHTML - 只是开始状态，然后是最终状态）。

Answer 5

我的问题与 OP 完全相同，在阅读了所有答案和 cmets 之后，似乎没有人真正理解 OP 的要求。

我从 Nicola Peluchetti 发布的测试中得到启发，并对其进行了一些修改。

片段测试不是将元素附加到<div> 和 then 附加到documentFragment，而是将元素直接附加到它（documentFragment）而不是先附加到@ 987654325@。此外，为了避免任何隐藏的开销成本，两个测试都从创建 <div> 容器和 documentFragment 开始，而每个测试只使用其中一个。

我认为最初的问题是，基本上，使用<div> 或documentFragment 作为容器单个追加节点是否更快？

看起来使用<div> 更快，至少在 Chrome 49 上。

http://jsperf.com/document-fragment-test-peluchetti/39

我能想到的documentFragment 的唯一用例（目前）是它需要更少的内存（这可以忽略不计），或者如果你有一堆你不想要的兄弟节点要附加放入“容器”元素。 documentFragment 就像一个包装器，它会溶解，只留下它的内容。

Answer 6

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<div ms-controller='for1'>
    <ul>

    </ul>
</div>

<script>
    var ul = document.querySelector('ul');
    console.time('no fragment');
    for(var i=0;i<1000000;i++){
        var li = document.createElement('li');
        li.innerText = i;

        ul.appendChild(li);
    }
    console.timeEnd('no fragment');

    console.time('has fragment');;
    var frg = document.createDocumentFragment()
    for(var i=0;i<1000000;i++){
        var li = document.createElement('li');
        li.innerText = i+'fragment';
        frg.appendChild(li);

    }
    ul.appendChild(frg)
    console.timeEnd('has fragment');
</script>
</body>
</html>

结果是 无片段：1615.278ms testFragment.html:36 有片段：2908.286ms

所以，没有 Fragment 更快。 我认为原因是 chrome 做了一些事情。

Answer 7

来自 wolfram77 的 jsperf 在非片段示例中包含一个额外的 for 循环，这是导致性能差异的主要原因，而不是 DocumentFragment。通过删除这个额外的 for 循环，您可以获得相同的结果，但性能完全不同：

Example on jsperf.com

所以我仍然看不到脚本部分的性能优势，但是当浏览器必须为每个附加元素重新绘制时，可能会有一个性能优势。