Javascript 附加一个DocumentFragment会导致多少回流？

使用允许我们将DOM元素彼此连接起来，而不会引起冲突（即使用脱机DOM树）。很多库都喜欢使用文档片段来提高性能

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

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

标题1
同侧眼线

同侧眼线

标题2
同侧眼线

同侧眼线

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

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

更新： 我收到了谷歌Chrome团队成员的回复：

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

---

每次调用导致DOM回流的操作时，都会发生一个DOM回流进程。 我们可以从中看出：

此模式允许我们创建多个元素并将它们插入到 DOM触发一次回流。它使用一种叫做 文档片段。我们在DOM之外创建一个DocumentFragment（因此 它超出了流程）。然后，我们创建并添加多个元素到 这最后，我们将DocumentFragment中的所有元素移动到DOM中 但是触发一次回流

有几种可能导致DOM回流的方法，包括在文档中附加新元素。使用

DocumentFragment

的目的是能够在一次操作中将内容附加到DOM，从而导致一次回流过程

根据该报告，我们可以看到：

有时，对文档中的单个元素进行回流可能需要 回流其父元素以及其后的任何元素

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

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

---

我打赌第一个问题的答案是“一”可能会有帮助。@JanDvorak我想所有浏览器都只会进行一次回流，但这不是实现的责任吗（即在一般情况下无法验证）？@dystroy nice guess。你能证明它不是规范所要求的吗？你有“导致单次回流”的来源吗？谢谢你的时间和回答。然而，这与其说是一个答案，不如说是一个有根据的猜测。“我认为回流过程可能会更贵或更便宜，取决于添加的内容。”如果您声称正在进行不止一次回流，您能展示一下吗？（根据规范，用小提琴或任何类似的东西）好吧，我加入到回答中的那篇文章中说，回流单个元素可能会回流它的父元素，也可能回流它后面的任何元素。然而，这一切都将在一个单一的回流过程中完成。非常好的经验过程！你能确认这也是其他浏览器中的行为吗？我不能确认，但如果你仔细想想，因为浏览器是在一个线程中进行的，所以对于一个操作，可能有多个回流过程的唯一方法是，如果它们允许回流以类似于

setTimemout

的方法在多个批次中运行，允许在批之间执行一些客户端代码。但是，如果执行的其他代码再次修改DOM呢？在这种情况下，一切都必须重新计算，所以我很确定回流总是作为原子操作发生的。