网页一帧有多长 是如何判定的

摘要:垂直同步信号是什么?有啥用?网页会掉帧是什么原因?16ms的特殊意义?网页一帧有多长是怎么判定的?

什么是垂直同步信号:

我们知道,屏幕是由成千上万个像素点组成的大矩阵,而这个矩阵以极快的速度“从左往右,从上往下”刷新“扫描”每个像素点的值。而人眼感觉不到这种超快的“闪烁”,比如电脑刷新屏幕的物理频率大概是60Hz。当屏幕扫描完一横排像素就会产生“水平同步信号”,当屏幕扫描完所有横排即一屏的像素,就会产生“垂直同步信号”。也就是“垂直同步信号”反映的是屏幕刷新的频率。

(我们知道“帧”不仅仅可以描述反映屏幕刷新的频率,也可以描述反映网页渲染变化的频率,描述的对象如有省略,由文章的上下文来判断,这里先提前说明一下。)

垂直同步信号的意义:

垂直同步信号:如果GPU渲染频率比屏幕刷新频率高的话,会有两帧画面在一起出现。所以利用垂直同步信号压制GPU渲染的频率,以免浪费性能。因此如果有些游戏要求频率高,又开启了垂直同步,但是屏幕硬件的刷新频率低拖慢了被压制的GPU渲染频率,也会有掉帧的现象。(GPU渲染频率慢就会有掉帧的效果。) via

我们知道玩电子游戏通常可以选择“是否开启垂直同步信号”,它的意思是是否等该帧显示完再显示下一帧,这个选项需要我们发挥一点推理能力来理解。这里直接给出结论:

  • 如果关闭“垂直同步信号”的问题:浪费GPU性能+两帧画面一起出现
  • 如果打开“垂直同步信号”以压制GPU频率:如果(机器的)屏幕刷新频率太慢,会导致掉帧。

而如果把网页页面渲染比作游戏界面,其实正是开启了“垂直同步信号”的这种情况,即网页要靠“垂直同步信号”压制压低GPU频率,网页渲染也就天生地具备了“掉帧”的风险。

网页16ms界限的意义:

16ms也就是60Hz的时间间隔。因为网页渲染的机制引用了“垂直同步信号”压制压低GPU频率,所以可 从屏幕刷新的理念中沿用, 并确立一个16ms界限。

假设网页渲染的每帧比16ms短是没有意义的(也就是浪费GPU性能并且超出屏幕当前的能力)。但是网页渲染每帧可以比16ms长。

屏幕刷新频率 vs 人眼的接收频率: 人眼每秒刷新20次,也就是以20Hz来接收光信号。但是机器一般要每秒刷新更多的次数,才能使得动画流畅。但是假设快如每秒60次,再往上,更快(对于一般的场景要求)已经察觉不到差别了。

在这里,我先把 结论 上了:(后文再解释浏览器具体是怎么利用“垂直同步信号”压制压低GPU频率,也就是网页刷新是怎么实现的)

对于在网页上的多数情况:

  • 网页帧的频率(小于并且逼近60Hz)  ===  UI input回调(scoll resize mouseover等)触发的频率  ===  raq的触发频率
    • (requestAnimationFrame只知道这已是网页新的一帧,但是它不知道一帧需要多长的时间(也就是有可能一帧比16ms长)。)
  • GPU的潜力  >  屏幕刷新频率(60Hz)  >=  网页帧的频率(小于并且逼近60Hz)  >  用户click操作频率
  • event loop的频率  通常>  屏幕刷新频率(60Hz)  >=  网页帧的频率(小于并且逼近60Hz)  >  用户click操作频率
    • 在防抖节流的章节,我们通常设置80ms作为间隔,也就是12Hz的样子,当然防抖节流具体得看场景。

详细解释推导网页的“帧有多长时间”是怎么判定和实现的:

  • 开始执行新的关键渲染路径task的条件:在每一个event loop末尾检查【1】是否需要更新页面【2】垂直同步信号是否到达
  • 在关键渲染路径最后的“由调度线程把计算出来的渲染数据提交给GPU完成渲染”这一步骤,标志着一帧的结束,也是新的一帧的开始。一帧有多长就是这样决定的
  • (补充说明:一个task,即便是负责执行关键渲染路径的task,其执行时长跨度可能远低于16ms,也可能远多于16ms)
  • (补充说明:很多文章声称“垂直同步信号决定了网页一帧的开始”,这个观点是错误的,我就被该观点坑了很久)

在那些特殊情况比如主线程就写了一个sleep多少秒函数的情况下,去讨论页面一帧能持续多久没有意义,变数太大了。

要讨论就讨论当你使用raq想做一个流畅动画时,页面的一帧能持续多久。

可见,若想要推算出网页的“一帧有多长”, 是非常不直观的。 另可由以上条件可以尝试推演出各不同情况下“一帧有多长”的结果。

如果程序员需要利用requestAnimationFrame来实现动画,通常需要尽力简化每个event loop的任务队列并且压缩每个task的时长。

由经验可以总结出来,“一帧的时间”通常会大于并且尽量逼近16ms。因为频率是时间的倒数,所以得出从频率角度看的结论:“一帧的频率”通常小于并且逼近60Hz

  • 补充chome devtool控制台performance timeline的相关事实:
    • 实灰线是等时间间隔线。但是这个“等时间间隔”随着你的缩放也会拉长或者缩短,注意一下就行了
    • 粗虚线就是网页的帧之间的分割线
文章目录
  1. 什么是垂直同步信号:
  2. 垂直同步信号的意义:
  3. 网页16ms界限的意义:
  4. 详细解释推导网页的“帧有多长时间”是怎么判定和实现的: