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

Does that cause a (synchronous?) repaint to happen during the time when we're trying to avoid causing paints, thus voiding the purpose of requestAnimationFrame?

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

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

Or, will the browser be smart and wait until after that frame is complete (after all those DOM manipulations are complete) in order to finally paint the resulting DOM structure?

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

What are all the things that can cause repaints/reflows, and that we would want to avoid doing while inside a requestAnimationFrame?

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

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

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

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