javascript - javascript 优化上下文中的渲染帧是什么

Question

我正在阅读this article关于javascript优化，有以下段落:

When visual changes are happening on screen you want to do your work at the right time for the browser, which is right at the start of the frame. The only way to guarantee that your JavaScript will run at the start of a frame is to use requestAnimationFrame.

还有这个:

Frameworks or samples may use setTimeout or setInterval to do visual changes like animations, but the problem with this is that the callback will run at some point in the frame, possibly right at the end, and that can often have the effect of causing us to miss a frame, resulting in jank.

我想知道这里的框架是什么？它是指浏览器或设备以 60 fps 间隔发布的图片吗？如果是这样，那么如何如段落中所述回调在框架中的某个点运行？

Answer 1

是的，这里的一帧就是屏幕的更新周期。

屏幕并不是一次性全部更新，而是在更新周期中从上到下更新。在 CRT 显示器中，实际的光束扫过屏幕，照亮了荧光粉；在 LCD 屏幕中，它只是用新数据更新的像素，但它以相同的方式扫过。

如果屏幕更新与帧速率同步，动画将流畅地流动，但如果间隔以不同的速率运行，它将进行双重更新或在某些周期内不进行更新，这表现为不稳定的运动。如果更新发生在扫描经过屏幕的该部分时，您甚至可以看到 tearing .

更新动画的理想时间是vertical blanking interval期间。此时扫描已完成一个更新周期并等待下一个更新周期开始。这就是 requestAnimationFrame 的用途。