附加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：我们更倾向于将reflow称为布局，因为它基本上是一个触发页面布局/重绘的事件。

Answer 1

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

  

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

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

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

  

有时可能需要回复文档中的单个元素   回流其父元素以及其后的任何元素。

但是，所有这些回流操作都将在单次回流过程中进行。

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