请求不断调用的动画帧

Question

尝试了解RequestAnimationFrame及其内部工作原理。

浏览器有一个主线程，它是一个事件循环。事件循环可以填充各种异步事件，例如用户交互，定时器被触发，网络调用完成以及触发布局和绘制的事件，例如，输入或JS。

因此，当JS函数使DOM的布局无效或导致重新绘制时，浏览器的主线程重新绘制需要更新的图层，合成器线程将更新的纹理上传到最终合成发生的GPU并且结果图像显示在屏幕上。

所以，我的印象是浏览器只在实际需要时执行绘制。如果您在静态页面上的Chrome开发工具时间轴上捕获事件而没有任何事情发生，则绝对不会捕获任何事件（没有布局，没有绘制，也没有触发动画帧）。说得通。

但是你在控制台上运行以下代码，

function onBeforeNextRepaint() {
    requestAnimationFrame(onBeforeNextRepaint);

    console.log('About to paint ...');
}

onBeforeNextRepaint();

现在，您再次捕获时间轴事件，并注意到“动画帧已被触发”＃39;事件和您的控制台记录了＆＃39;关于绘制...＆＃39;。

根据MDN，

  

Window.requestAnimationFrame（）方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数以在下次重绘之前更新动画。

这意味着浏览器不断绘画，因此在每次重绘之前调用我的函数来记录消息。我猜测浏览器维护一个调度程序，使绘制调用的速率与屏幕的刷新率相匹配。

现在我的困惑在于：

1. 浏览器的主线程是否经常重新绘制，生成纹理并将纹理上传到GPU并进行绘制调用（限制以匹配屏幕的刷新率）？ （听起来效率低下）
2. 这就是为什么我的onBeforeNextRepaint＆＃39;回调被不断调用？
3. 如果1和2为真，那么在我的第一个时间线捕获中，为什么我不捕获＆＃39;更新图层树＆＃39;和＆＃39;复合图层＆＃39;事件？

Answer 1

以下blog post确实帮助我理解了整个过程是如何运作的。

从中：

基本上，整个事件循环函数可以用这段代码来说明：

while (eventLoop.waitForTask()) {  
    const taskQueue = eventLoop.selectTaskQueue()
    if (taskQueue.hasNextTask()) {
        taskQueue.processNextTask()
    }

    const microtaskQueue = eventLoop.microTaskQueue
    while (microtaskQueue.hasNextMicrotask()) {
        microtaskQueue.processNextMicrotask()
    }

    if (shouldRender()) {
        applyScrollResizeAndCSS()
        runAnimationFrames()
        render()
    }
}

并描绘如下：

Answer 2

我认为你误解了MDN给出的描述。让我分解一下。

  

Window.requestAnimationFrame（）方法告诉浏览器您希望执行动画

这意味着它会告诉浏览器您希望预制一个需要重新绘制的动画。但要做到这一点，我们需要运行一些代码。

  

并请求浏览器调用指定的函数以在下次重绘之前更新动画。

这意味着在动画需要的下一次重绘之前，调用我的回调函数。

requestAnimationFrame不是绘制事件回调，而是在浏览器现在必须执行的下一个绘制之前触发回调的方法。