Question

AFAIK，文档片段的好处是它们不会导致重排事件，直到片段插入到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，它提供了对不同性能特征的相当不错的概述。

Answer 2

表现很重要。 createDocumentFragment是一个不受欢迎的元素。使用它的操作执行得更快。因此，如果您必须在附加到DOM之前主动使用fragmemt进行操作 - 请使用createDocumentFragment。

否则 - 没有差异。

Answer 3

正常的DOM插入只能一次性插入一个节点（并通过扩展它的子节点及其子节点等）。

文档片段可以包含多个“顶级”节点，这些节点可以一次性添加，而不需要在将它们添加到DOM之前共享一个共同的父。

在你的例子中没关系，因为你有一个container div是所有子节点的父节点，所以“普通”DOM插入工作正常。

使用createDocumentFragment而不是DOM外的元素有什么好处？

3 个答案: