Javascript 做什么和不做什么'；在requestAnimationFrame内时是否会导致重新绘制/回流？

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

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

当我们试图避免重新绘制/回流时，是否会导致（同步？）重新绘制/回流，从而使

requestAnimationFrame

的目的无效

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

在requestAnimationFrame中，有哪些事情会导致重绘/回流，我们希望避免这样做

中的样式列表只提到在修改时（我认为）会导致重新绘制/回流的样式。我还想知道哪些JavaScript属性（以及它们在哪个对象上）在被访问时会导致回流（即回流是为了能够获得某个属性的值）

这是否会导致在此期间发生（同步？）重新绘制 当我们试图避免造成油漆，从而使 请求动画帧

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

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

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

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

哪些因素会导致重绘/回流，而我们 是否希望在requestAnimationFrame中避免这样做

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

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

您可以阅读更多关于这方面的内容，并获得触发布局和重新绘制的css属性列表

---

最后，为了澄清最后一个问题，无论是在皇家空军内部还是外部，都会进行重新绘制和布局。请记住这一点。

您是在每帧的基础上进行的，即定期附加子帧吗？@TahirAhmed不一定。可能是每隔几秒钟，甚至可能不到一秒钟。不过，我不想对它施加限制。用例可以是任何东西（例如，每帧添加删除元素以产生某种快速闪烁的效果）。我认为每帧添加删除元素对你来说太快了，以至于你无法在视觉上注意到任何东西，因为浏览器倾向于每秒渲染60帧。但是，我知道这是一个示例场景，rAF在这里没有目的。您只想了解在单个帧上，上述附加和删除子操作将如何执行。另一个问题，您是否在这里一般使用“重新绘制”一词，因为一个帧由许多操作组成，其中一个是“绘制”。看看Paul Lewis的这篇文章，我相信我的意思是“重新喷漆和/或回流”，而不仅仅是我感兴趣的重新喷漆。回流焊会导致重新喷漆，因为东西已经重新布置，我认为它们需要重新喷漆。所以，我想我真的很想知道是什么导致了回流（布局）。这是一个很好的触发回流（布局）的列表。但是，本文没有提到在读取属性会导致回流以确定正在读取的属性的值的情况下不读取哪些内容。@trusktr我不知道有任何属性会在读取时触发回流，特别是在读取属性不会影响其在DOM中的样式的情况下。就我而言，所有属性都存储在对象的原型中，并从那里检索。也许您指的是我们请求样式值、更改值、请求值、更改值等以导致强制同步布局的抖动？是的，布局会导致重新绘制，所以对动画性能来说尤其费力。为了安全起见，基本上保持旋转、平移、缩放和不透明度。你完全可以通过读取触发回流，请参阅：@trusktr据我所知，回流/布局发生在任何改变尺寸的事情上，回流触发绘制。