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的内部或外部，重绘和布局都会发生。请记住这一点。

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

1 个答案: