requestAnimationFrame 的 Bug？

ゝ一纸荒年。 2023-01-18 15:27 103阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

## 起因 ##

今天有一位同学，在群里问了这一个问题：`requestAnimationFrame` 的执行机制如何

![cb69e0c8dc8089bd03b5a825f76c5a43.png][] image.png

这个问题当然不陌生。`requestAnimationFrame` 在浏览器每一帧开始绘制之前会执行。借助 `requestAnimationFrame` 高效的执行效率，我们可以使用`requestAnimationFrame` 进行动画操作、FPS 的计算、甚至可以通过算每一帧所需要的真实时间，来增加帧数。![d8720393be0b5bd0d39ec0e08a76085c.png][]

在MDN中，还有这样一句话：**在多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配**。于是yck同学此时问了一句：我屏幕刷新率特别快怎么办？

![5a90b7bb96f2ee84b9c522da5dcee3b5.png][] image.png

这句话令人深思。在如今高刷显示器盛行的年代，我依然在使用60hz的MacBook。虽然MDN写着匹配，但这个也不一定对。带着这个疑问，我开始了探索之旅。

作为一个半数码党，对于现在数码产品显示器的刷新率种类还是懂一点的。有120hz，144hz等等。我抱着试试看的心态，去搜了144hz下 `requestAnimationFrame` 的状况

## 现状 ##

果然不出所料。我通过搜索，找到了一篇问答帖：这位网友讲，它使用了`165hz`的显示器，但通过`requestAnimationFrame` 计算出来的`FPS`依然只有`30-60fps`。

![899c5dc55b0e8fa32f8c94e89ae23f17.png][] image.png

那就证明了，的确在一部分用户下，刷新率和 `requestAnimationFrame` 存在不同步问题。可是在回答区，有一部分用户也反馈，他们屏幕刷新率和 `requestAnimationFrame` 是同步的。**这样也印证了大概率是一个Bug。**

## 真的是 Bug ##

于是我去`Chromium Bugs`网站内去查找，找到了这样的一个Issue。内容也在写，使用了`144hz`刷新率的显示器，但FPS上限依然只有60。

![34b5e6270b65171f0fd868fa4d706877.png][] image.png

于是我抛弃掉一部分争论，直接找修复的代码和备注。继续向下翻，找到了`chromium`官方人员关于只有`60fps`的解释：

> On Linux Nvidia we use GLX\_SGI\_video\_sync to time vsyncs. Unfortunatelyit's difficult to calculate an accurate refresh rate with it because itsvideo sync counter is wrong. Before, we hardcoded 60 FPS. Now insteadwe use xrandr to get the refresh rate of the primary monitor.

其大意是，由于在`Linux`下的`Nvdia`驱动，在使用`GLX_SGI_video_sync`进行计算`vsyncs`(垂直同步)的时间时，由于计数器错误，于是官方直接将`60FPS`**进行硬编码**。现在，他们换成了使用`xrandr`进行获取刷新率计算。

> xrandr 是一款Linux官方的 RandR (Resize and Rotate)。它可以设置屏幕显示的大小、方向、镜像等。wiki.archlinux.org/index.php/X…

既然是`Bug`，那我们就看下`Chromium`到底是怎么修复的

## 修复逻辑 ##

找到回答中具体的`commit`记录，然后链接到`Chromium Gerrit`平台。来到了这个CR详情

来到 gl\_surface\_glx.cc这个文件。`glx`是`Chromium`中硬件加速相关的代码

![8c652b714b3c5abc6fa93958182e8382.png][] image.png

可以看到，其中的一个float变量叫 `refresh_rate`，这个就是最后计算刷新率的值。然后使用 `(1 / refresh_rate)`，计算出刷新一次所控制的秒。如果是`60hz`，则 `1000ms / 60次 = 16.66ms` 1次。

这里我们继续跟 `refresh_rate` 的计算方法 => `GetRefreshRateFromXRRModeInfo`。找到 x11\_display\_util.cc 文件可以看到逻辑

![7b2effca59defaae2e50e5be65230803.png][] image.png

这里可以看到，其计算逻辑是 `Pixel Clock / (Horizontal Total * Vertical Total)`。那么这三个数值代表什么意思呢？

*  `Pixel Clock` 时钟频率，是显示器每秒钟绘制的像素数。
 *  `Horizontal Total` 每一帧绘制的水平像素数量
 *  `Vertical Total` 每一帧绘制的垂直像素数量

即`时钟每秒处理的像素数量 / (水平像素数量) * (行像素数量)`。

## 关于多显示器 ##

从`Chromium Gerrit`平台提交的代码注释中可以看到，多显示器支持其实是存在问题的。这里可以参考另外一个Bug。这位同学使用了`144hz + 60hz`的显示器，但输出依然是`60fps`

![d2891959c2d9770c5364a77566c9066c.png][] image.png

目前官方人员只提出了解决方案，但没有看到任何`commit`有产出。所以这还是个`Bug`

## 其他参考 ##

*  www.cnblogs.com/biglucky/p/…
 *  superuser.com/questions/6…
 *  www.html5gamedevs.com/topic/17550…
 *  chromium-review.googlesource.com/c/chromium/…
 *  bugs.chromium.org/p/chromium/…
 *  news.ycombinator.com/item?id=215…

关于本文

# 王圣松 #

https://juejin.cn/post/6953541785217925151

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[cb69e0c8dc8089bd03b5a825f76c5a43.png]: /images/20221021/c0aff52d37aa4280bcd4e3995ce7c39f.png
[d8720393be0b5bd0d39ec0e08a76085c.png]: /images/20221021/d02474584e214f3493b78d4b55bd81ff.png
[5a90b7bb96f2ee84b9c522da5dcee3b5.png]: /images/20221021/64e5d7f7403c4921b4b6d77a6983a977.png
[899c5dc55b0e8fa32f8c94e89ae23f17.png]: /images/20221021/592ab9e54ba14c0686b7bb8b49912a7c.png
[34b5e6270b65171f0fd868fa4d706877.png]: /images/20221021/7cc3d8af32f84ac792078f3ae83d1b36.png
[8c652b714b3c5abc6fa93958182e8382.png]: /images/20221021/27ec9bc3cad24a37acb59d9d9fdebf02.png
[7b2effca59defaae2e50e5be65230803.png]: /images/20221021/4e10619ca2db4d5fa1f9636560b15e5a.png
[d2891959c2d9770c5364a77566c9066c.png]: /images/20221021/d88f60a70c01439c9064822c8bb5d051.png