Wepress

Appearance

浏览器一帧都会干些什么？ ​

参考答案： ​

我们都知道，页面的内容都是一帧一帧绘制出来的，浏览器刷新率代表浏览器一秒绘制多少帧。原则上说 1s 内绘制的帧数也多，画面表现就也细腻。目前浏览器大多是 60Hz（60帧/s），每一帧耗时也就是在 16.6ms 左右。那么在这一帧的（16.6ms） 过程中浏览器又干了些什么呢？

image.png

通过上面这张图可以清楚的知道，浏览器一帧会经过下面这几个过程：

  • 接受输入事件
  • 执行事件回调
  • 开始一帧
  • 执行 RAF (RequestAnimationFrame)
  • 页面布局，样式计算
  • 绘制渲染
  • 执行 RIC (RequestIdelCallback)

第七步的 RIC 事件不是每一帧结束都会执行，只有在一帧的 16.6ms 中做完了前面 6 件事儿且还有剩余时间，才会执行。如果一帧执行结束后还有时间执行 RIC 事件，那么下一帧需要在事件执行结束才能继续渲染，所以 RIC 执行不要超过 30ms，如果长时间不将控制权交还给浏览器，会影响下一帧的渲染，导致页面出现卡顿和事件响应不及时。

题目要点： ​

浏览器刷新率与帧率 ​

  • 定义：浏览器的刷新率通常指的是每秒绘制多少帧，单位是帧/秒（fps）。
  • 当前标准：目前大多数浏览器采用的刷新率是 60Hz，即每秒绘制 60 帧。
  • 帧耗时：在 60Hz 的刷新率下，每一帧大约耗时 16.6 毫秒（ms）。

浏览器一帧 ​

  • 输入事件：浏览器接收用户的输入事件，如点击、滚动等。
  • 事件回调：处理与输入事件相关的回调函数，如点击事件、键盘事件等。
  • 开始一帧：开始新的一帧处理。
  • 执行 RAF：请求下一帧动画，通常用于平滑动画效果。
  • 页面布局：根据样式计算确定页面元素的位置和大小。
  • 绘制渲染：将布局后的元素绘制到屏幕上。
  • 执行 RIC：如果前一帧有剩余时间，则执行空闲回调函数。