在 requestAnimationFrame 中什么会和不会导致重绘/回流？

Question

例如，如果我做类似的事情

requestAnimationFrame(function() {
    el.appendChild(otherEl)
    el.appendChild(anotherEl)
    anotherEl.removeChild(someOtherEl)
    anotherEl.appendChild(yetAnotherEl)
})

在我们试图避免导致重绘/回流的时候，这是否会导致（同步？）重绘/回流发生，从而使目的无效requestAnimationFrame？

或者，浏览器是否会智能并等到该帧完成后（在所有这些 DOM 操作完成后）才能最终绘制生成的 DOM 结构？

哪些事情会导致重绘/回流，以及我们希望在 requestAnimationFrame 中避免做的事情？

这篇 html5rocks 文章中的样式列表仅提到（我认为）在修改它们时会导致重绘/回流的样式。我也很想知道哪些 JavaScript 属性（以及它们在哪个对象上）在被访问时会导致回流（即发生回流是为了能够获得某个属性的值）。

Answer 1

当我们试图避免引起绘制时，这是否会导致（同步？）重绘发生，从而使 requestAnimationFrame 的目的无效？

我不太明白你的第一个问题，但无论如何我会尽力回答。

从 DOM 中添加或删除元素会触发回流，而 requestAnimationFrame 是强制创建图层的 translateZ(0) 或 translate3d(0,0,0) 技巧的正式版本。从这个意义上说，触发回流与使用 rAF 无关。您提到“当我们试图避免造成油漆时会发生重新油漆”，我认为您指的是无论如何都应该实施的限制。如果我没有正确回答，请告诉我。

或者，浏览器会聪明地等到该帧完成之后（所有这些 DOM 操作完成之后）才能最终绘制生成的 DOM 结构吗？

鉴于所有追加和删除都在同一个 rAF 调用中，浏览器（据我理解）应该将它们全部绘制在一个框架中。

哪些事情可能会导致重绘/回流，并且我们希望在 requestAnimationFrame 内避免做这些事情？

重画是由任何导致可见性变化但不影响布局的因素触发的。不透明度不会触发重新绘制，因此制作动画要便宜得多。

重排会影响整个或部分页面的布局，导致重新计算受影响元素的大小和位置，因此应在动画中避免。平移、旋转和缩放但不会触发回流。

您可以在此处阅读有关此内容的更多信息，并获取触发布局和重绘的 css 属性列表。

最后，为了澄清最后一个问题，无论它们是在 rAF 内部还是外部，都会发生重新绘制和布局。要时刻铭记在心。