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

时间:2015-04-01 09:59:51

标签: javascript

我正在阅读关于javascript优化的this article,并且有以下段落:

  

当屏幕上发生视觉变化时,您想要完成工作   在浏览器的正确时间,这是在开始时   帧。保证JavaScript运行的唯一方法   帧的开始是使用requestAnimationFrame。

而且:

  

框架或样本可以使用setTimeout或setInterval来进行可视化   像动画一样的变化,但问题在于   回调将在帧中的某个点运行,可能就在   结束,这往往会导致我们错过一个框架,   导致jank。

我想知道这里的框架是什么?它是指浏览器或设备以60 fps间隔放置的图片吗?如果是这样,那么callback run at some point in the frame如何在段落中说明?

1 个答案:

答案 0 :(得分:1)

是的,此上下文中的框架是屏幕的更新周期。

屏幕不会一次全部更新,而是在更新周期内从顶部更新到底部。在CRT显示器中,它是一个实际的光束扫过屏幕,照亮了荧光粉,在LCD屏幕上,它只是用新数据更新的像素,但它以相同的方式进行扫描。

如果屏幕更新与帧速率同步,动画将平滑流动,但如果间隔以不同的速率运行,则会对某些周期进行双倍更新或不进行更新,这些周期可视为抖动。如果更新发生在sweap通过屏幕的那一部分时,您甚至可以看到tearing

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