在 requestAnimationFrame 中，什么会导致重绘/重排？

Question

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

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

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

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

在 requestAnimationFrame 中，哪些事情会导致重绘/重排，并且我们希望避免这样做？

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

Answer 1

这是否会导致在此期间发生（同步？）重绘 当我们试图避免造成油漆，从而使 requestAnimationFrame?

我不太明白你是第一个问题，但我还是会尽力回答。

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

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

鉴于您所有的附加和删除都在同一个 rAF 调用中，浏览器（据我所知）应该将它们全部绘制在一个帧中。

有哪些因素会导致重绘/回流，以及我们 想要避免在 requestAnimationFrame 中执行操作吗？

任何会导致可见性变化但不影响布局的事情都会触发重绘。不透明度不会触发重绘，因此动画成本要低得多。

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

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

最后，为了澄清最后一个问题，无论是在 rAF 内部还是外部，都会发生重绘和布局。请记住这一点。