3

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 也支持它），我的理论是它在某些时候更有效，但多年对浏览器渲染引擎的优化使其变得不必要。这个对吗？

4

3 回答 3

4

当您有许多元素要附加到现有元素时，可以使用片段。当您只有一个要附加的元素（以及它的子元素）时，我不相信它们有任何性能差异 - 但如果您被迫将许多元素附加到同一个目标，那么片段可能是合适的。John Resig 前段时间为此设置了一个测试，您可以在此处运行该测试- 从各方面来看，片段在适当的情况下仍然具有更好的性能。

可以在此处找到他关于该主题的完整帖子，其中提供了对不同性能特征的相当不错的概述。

于 2012-11-05T20:35:46.503 回答
2

一个普通的 DOM 插入只能一次性插入一个节点（以及它的子节点，以及它们的子节点等）。

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

在您的示例中，这无关紧要，因为您有一个containerdiv，它是所有子节点的父节点，因此“正常”的 DOM 插入工作正常。

于 2012-11-05T20:46:35.787 回答
1

性能很重要。createDocumentFragment 是 out-of-dom 元素。使用它的操作执行得更快。因此，如果您必须在附加到 DOM 之前主动使用 fragmemt 进行操作 - 请使用 createDocumentFragment。

否则 - 没有区别。

于 2012-11-05T20:37:27.277 回答