起因

今天有一位同學(xué)，在群里問了這一個問題：requestAnimationFrame 的執(zhí)行機(jī)制如何

這個問題當(dāng)然不陌生。requestAnimationFrame 在瀏覽器每一幀開始繪制之前會執(zhí)行。借助 requestAnimationFrame 高效的執(zhí)行效率，我們可以使用requestAnimationFrame 進(jìn)行動畫操作、FPS 的計算、甚至可以通過算每一幀所需要的真實(shí)時間，來增加幀數(shù)。

在MDN中，還有這樣一句話：在多數(shù)遵循W3C建議的瀏覽器中，回調(diào)函數(shù)執(zhí)行次數(shù)通常與瀏覽器屏幕刷新次數(shù)相匹配。于是yck同學(xué)此時問了一句：我屏幕刷新率特別快怎么辦？

這句話令人深思。在如今高刷顯示器盛行的年代，我依然在使用60hz的MacBook。雖然MDN寫著匹配，但這個也不一定對。帶著這個疑問，我開始了探索之旅。

作為一個半數(shù)碼黨，對于現(xiàn)在數(shù)碼產(chǎn)品顯示器的刷新率種類還是懂一點(diǎn)的。有120hz，144hz等等。我抱著試試看的心態(tài)，去搜了144hz下 requestAnimationFrame 的狀況

現(xiàn)狀

果然不出所料。我通過搜索，找到了一篇問答帖：這位網(wǎng)友講，它使用了165hz的顯示器，但通過requestAnimationFrame 計算出來的FPS依然只有30-60fps。

那就證明了，的確在一部分用戶下，刷新率和 requestAnimationFrame 存在不同步問題。可是在回答區(qū)，有一部分用戶也反饋，他們屏幕刷新率和 requestAnimationFrame 是同步的。這樣也印證了大概率是一個Bug。

真的是 Bug

于是我去Chromium Bugs網(wǎng)站內(nèi)去查找，找到了這樣的一個Issue。內(nèi)容也在寫，使用了144hz刷新率的顯示器，但FPS上限依然只有60。

于是我拋棄掉一部分爭論，直接找修復(fù)的代碼和備注。繼續(xù)向下翻，找到了chromium官方人員關(guān)于只有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驅(qū)動，在使用GLX_SGI_video_sync進(jìn)行計算vsyncs(垂直同步)的時間時，由于計數(shù)器錯誤，于是官方直接將60FPS進(jìn)行硬編碼。現(xiàn)在，他們換成了使用xrandr進(jìn)行獲取刷新率計算。

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

既然是Bug，那我們就看下Chromium到底是怎么修復(fù)的

修復(fù)邏輯

找到回答中具體的commit記錄，然后鏈接到Chromium Gerrit平臺。來到了這個CR詳情

來到 gl_surface_glx.cc這個文件。glx是Chromium中硬件加速相關(guān)的代碼

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

這里我們繼續(xù)跟 refresh_rate 的計算方法 => GetRefreshRateFromXRRModeInfo。找到 x11_display_util.cc 文件可以看到邏輯

這里可以看到，其計算邏輯是 Pixel Clock / (Horizontal Total * Vertical Total)。那么這三個數(shù)值代表什么意思呢？

• Pixel Clock 時鐘頻率，是顯示器每秒鐘繪制的像素數(shù)。
• Horizontal Total 每一幀繪制的水平像素數(shù)量
• Vertical Total 每一幀繪制的垂直像素數(shù)量

即時鐘每秒處理的像素數(shù)量 / (水平像素數(shù)量) * (行像素數(shù)量)。

關(guān)于多顯示器

從Chromium Gerrit平臺提交的代碼注釋中可以看到，多顯示器支持其實(shí)是存在問題的。這里可以參考另外一個Bug。這位同學(xué)使用了144hz + 60hz的顯示器，但輸出依然是60fps

目前官方人員只提出了解決方案，但沒有看到任何commit有產(chǎn)出。所以這還是個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…