javascript - 附加DocumentFragment会导致多少次重排？

使用 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的回应:

最佳答案

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



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

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



但是，所有这些重排操作将在单个重排过程中进行。

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

关于javascript - 附加DocumentFragment会导致多少次重排？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15732900/