了解Chrome开发工具时间线

Question

我正在试图理解为什么我有几个长框架报告Chrome工具。

​

​

火焰图中的第一行(调用堆栈顶部)主要是Timer Fired事件，这些事件是由jQuery.Deferred()执行一组$(function(){ });就绪函数触发的。

如果我深入研究jQuery源代码并用requestAnimationFrame替换他们对setTimeout的使用火焰图并没有太大的变化，我仍然会看到许多rAFs在单个框架内触发(如开发工具所报告)，生成长帧。我本来希望做下面的伪代码：

window.requestAnimationFrame(function() {
    // do stuff
});

window.requestAnimationFrame(function() {
    // do more stuff
});

在两个不同的动画帧上执行。不是这样的吗？

所有正在执行的JS都是必要的，但是当https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution和setTimeout似乎没有实现这一点时，我应该做些什么来执行它作为“微任务”(正如所暗示的，但在这里没有解释)。

更新

这是一个放大的镜头，其中一个长框，似乎没有任何折光(强迫或其他)在其中。为什么这里的所有rAF回调都在一个帧中执行？

​

​

Answer 1

长帧通常是由强制同步布局造成的，当您(无意中)强制提前执行布局操作时。

当您写入DOM时，需要对布局进行重构，因为它已经被写操作失效了。这通常发生在下一帧。但是，如果您尝试从DOM读取，布局会在当前框架中提前进行，以确保返回正确的值。当强制布局发生时，它会导致长框架，导致jank。

为了防止这种情况发生，您应该只在requestAnimationFrame函数中执行写操作。读取操作应在此之外进行，以避免浏览器进行早期布局。

诊断强制同步布局是一篇解释得很好的文章，它有一个简单的示例演示，用于检测DevTools中的强制再流，以及如何解决它。

也可能值得查看FastDom，它是一个用于批处理读写的库。它基本上是一个排队系统，并且具有更大的可扩展性。

附加资料来源： 什么作用力布局/回流？，保罗爱尔兰人，包含一个全面的属性和方法列表，这些属性和方法将强制布局/再流。

更新:对于假设多个requestAnimationFrame调用将在不同的帧上执行回调的假设，情况并非如此。在连续调用时，浏览器将回调添加到动画回调的文档列表中。当浏览器运行下一个框架时，它遍历文档列表并按照添加的顺序执行每个回调。

有关实现细节，请参阅HTML中的动画帧。

这意味着您应该避免使用连续调用，特别是在回调函数执行时间加在一起超过框架预算的情况下。我认为这可以解释为什么长帧不是由再流引起的。