附加 DocumentFragment 会导致多少次回流？

Question

使用 DocumentFramgment 允许我们将 DOM 元素彼此附加，而不会导致 browser reflow（即使用离线 DOM 树）。很多像jQuery 这样的库都使用文档片段来提高性能。

文档片段可以具有复杂的结构。例如，假设它代表如下内容：

<div>
   <span>
       <a href='asd'>asd</a>
   </span>
   <span>
       <a href='asd2'>asd2</a>
   </span>
   <div>
       <div>
          Hello World
       </div>
   </div>
</div>

或包含多个子的文档片段：

<h2>Title 1</h2>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h2>Title 2</h2>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>

通常，当我们完成构建片段时，我们会将其附加到主 DOM 树。

当我们这样做时会发生多少次回流？是否取决于文档片段的直接子代数？

更新：

我收到了来自 Google Chrome 团队的 Addy Osmani 的回复：

只有一个 DOM 重排。 PS：我们更倾向于将回流称为布局，因为它基本上是在页面中触发布局/重绘的事件。

Answer 1

每次调用导致一个动作的动作时，都会发生一个 DOM 重排过程。 我们可以在this article 中读到：

这种模式让我们可以创建多个元素并将它们插入到 DOM 触发单个回流。它使用一种叫做 文档片段。我们在 DOM 之外创建一个 DocumentFragment（所以 它是不合时宜的）。然后我们创建并添加多个元素 这。最后，我们将 DocumentFragment 中的所有元素移动到 DOM 但会触发一次回流。

various actions 可能会导致 DOM 回流，包括将新元素附加到文档。使用DocumentFragment 的目的是能够在单个操作中将内容附加到DOM，从而导致单个回流过程。

根据this article，我们可以读到：

有时重排文档中的单个元素可能需要 重排它的父元素以及跟随它的任何元素。

但是，所有这些回流操作都将在单个回流过程中发生。

我创建了一个fiddle 来演示这一点。使用 chrome 的时间轴，我们可以清楚地看到渲染发生在一个块中。