javascript - 附加一个 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>

或包含多个个 child 的文档片段:

<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 树。

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

更新:

我收到了来自 Addy Osmani 的回复Google 的 Chrome 团队成员:

Just one DOM reflow. PS: we're moving more towards referring to reflow as layout as it's basically an event triggering layout/repaint in the page.

Answer 1

每次调用导致一个的操作时，都会发生一个 DOM 回流过程。我们可以读入this article那:

This pattern lets us create multiple elements and insert them into the DOM triggering a single reflow. It uses something called a DocumentFragment. We create a DocumentFragment outside of the DOM (so it is out-of-the-flow). We then create and add multiple elements to this. Finally, we move all elements in the DocumentFragment to the DOM but trigger a single reflow.

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

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

Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it.

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

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