9

UsingDocumentFramgment允许我们将 DOM 元素彼此附加，而不会导致浏览器重排（即使用离线 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：我们更倾向于将重排称为布局，因为它基本上是在页面中触发布局/重绘的事件。

4

1 回答 1

6

每次调用导致一个动作的动作时，都会发生一个 DOM 回流过程。我们可以在这篇文章中读到：

这种模式让我们可以创建多个元素并将它们插入到 DOM 中，从而触发单个回流。它使用称为 DocumentFragment 的东西。我们在 DOM 之外创建了一个 DocumentFragment（因此它是不合流的）。然后我们创建并添加多个元素。最后，我们将 DocumentFragment 中的所有元素移动到 DOM 中，但会触发一次重排。

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

根据这篇文章，我们可以读到：

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

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

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

在此处输入图像描述

于 2013-03-31T18:41:24.310 回答