为什么在重画后安排某些东西时建议将setTimeout嵌套在requestAnimationFrame中？

Question

在有关前端工程师性能最佳实践的mozilla文档中，建议结合setTimeout使用requestAnimationFrame以在重新绘制后立即运行某些东西：

requestAnimationFrame(() => {
  setTimeout(() => {
    // This code will be run ASAP after Style and Layout information have
    // been calculated and the paint has occurred. Unless something else
    // has dirtied the DOM very early, querying for style and layout information
    // here should be cheap.
  }, 0);
});

为什么这是推荐的解决方案？究竟是什么使它成为在重画后立即安排某些事情的最佳方式？

Answer 1

为什么这是推荐的解决方案？究竟是什么使它成为重新粉刷后立即安排某事的最佳方式？

在重绘后立即运行代码可以最大限度地提高 DOM 已被完全计算的可能性，从而最大限度地减少查询 dom 导致代价高昂的回流的可能性。如果您无论如何都没有查询 dom，那么这不是您需要担心的事情。

requestAnimationFrame 将安排代码在重绘之前立即运行，这与您想要的位置很接近，但并不完全。因此，然后执行setTimeout0 （或setImmediate在支持它的浏览器上）将在此之后尽快执行代码。这不能保证您的代码是重绘后首先运行的代码，但这是您可以使用的 apis 所能做的最好的事情。