javascript - 与非 DOM 元素相比，使用 createDocumentFragment 有什么好处吗？

Question

据我所知，文档片段的好处是它们不会导致回流事件，直到片段被插入到 DOM 中。听起来很合理，但似乎非 DOM 元素也不会导致重排。

例如:

// with document fragment
var df = document.createDocumentFragment();
// append a bunch of hyperlinks to df
var container = document.createElement('div');
container.appendChild(df);
document.body.appendChild(container);

// with in-memory element

var container = document.createElement('div');
// append a bunch of hyperlinks to container
document.body.appendChild(container);

我在 Chrome 和 Firefox 中运行了这个，没有发现这两个版本之间有任何性能差异。

考虑到 createDocumentFragment 方法的年代(甚至 IE6 都支持它)，我的理论是它在某些时候更有效，但是浏览器渲染引擎的多年优化已经使它变得不必要了。这是正确的吗？

Answer 1

当您有许多元素要附加到现有元素时，可以使用片段。当您只有一个要追加的元素(连同它的子元素)时，我不认为它们有任何性能差异——但如果您被迫将许多元素追加到同一目标，则片段可能是合适的。 John Resig 不久前为此设置了一个测试，您可以 run here - 从各方面来看，片段在适当的情况下仍然表现更好。

可以找到他关于该主题的完整帖子 here ，它提供了不同性能特征的相当不错的概述。