例如，如果我做类似的事情
requestAnimationFrame(function() {
el.appendChild(otherEl)
el.appendChild(anotherEl)
anotherEl.removeChild(someOtherEl)
anotherEl.appendChild(yetAnotherEl)
})
在我们试图避免引起重绘/重排的时间期间，是否会导致(同步？)重绘/重排发生，从而使
requestAnimationFrame的目的无效？还是，浏览器会很聪明，等到该框架完成之后(所有这些DOM操作完成之后)，以便最终绘制最终的DOM结构？
有哪些可能导致重画/重排的东西，并且我们想避免在requestAnimationFrame中进行操作？
this html5rocks article中的样式列表仅提及(我认为)在修改后导致重画/重排的样式。我也很好奇要知道哪些JavaScript属性(以及它们在哪个对象上)在访问时会导致重排(即发生重排以便能够获取某个属性的值)。
最佳答案
我不太明白您是第一个问题，但无论如何我都会尽力回答。
从DOM中添加或删除元素会触发重排，而requestAnimationFrame是可强制创建层的translateZ(0)或translate3d(0,0,0)技巧的正式版本。从这个意义上讲，触发回流与使用rAF无关。您提到了“在我们试图避免引起油漆的时候发生重新油漆”，我认为您指的是无论如何都应实现的节流。如果我没有正确回答，请告诉我。
鉴于您所有的添加和删除操作都在同一个rAF调用中，因此，浏览器(据我所知)应将它们全部合并到一个框架中。
重绘由引起可见性变化但不影响布局的任何事物触发。不透明度不会触发重新绘制，因此制作动画要便宜得多。
回流会影响整个页面或部分页面的布局，从而导致重新计算受影响元素的大小和位置，因此应避免在动画中使用。平移，旋转和缩放，但不会触发重排。
您可以阅读有关此here的更多信息，并获取触发布局和重新绘制的css属性的列表。
最后，只是为了解决最后一个问题，无论它们是否在皇家空军内部或外部，都会进行重新绘制和布局。要时刻铭记在心。
关于javascript - 在requestAnimationFrame中时，什么会引起重画/重熔？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36465997/