简体中文
Englishvsynctester.com 如何检测浏览器 VSYNC 同步?图表各项代表什么?
更新时间
vsynctester.com 是一个在浏览器中运行的 VSYNC 同步、显示器刷新率与输入延迟测试工具。它通过 requestAnimationFrame（rAF）回调携带的时间参数，逐帧计算渲染时刻与显示器垂直同步信号之间的偏移，并把结果画成实时曲线。判断是否正常的方法很直接：如果浏览器 VSYNC 工作正常，蓝色偏移曲线应稳定在一条水平带内；如果出现规律性上下摆动、帧间隔曲线变红或偏移量持续漂移，就说明存在掉帧或同步异常。该工具只适用于支持高刷新率的浏览器环境，页面自身明确提示 Firefox 在 Windows 下的 VSYNC 是损坏的、不建议使用，Edge 和 IE 不支持高刷新率显示器。
检测原理：用 rAF 时间参数反推同步偏移
浏览器每次重绘前会调用 rAF 回调，并传入一个高精度时间戳。vsynctester.com 把这个时间参数当作“帧时间”，与根据设定刷新率推算出的理想 VSYNC 时刻做比较：
- 理想情况下，每帧的 rAF 时间应恰好落在刷新周期的整数倍上。
- 实际时间与理想时刻的差值，就是该帧的 VSYNC 偏移量。
- 连续记录偏移量，就能看出浏览器是否真正与显示器同步，还是只是“近似”地按固定间隔触发回调。
页面允许自定义刷新率（1–500 Hz）和偏移量（0–25 ms），并用 spin-wait（自旋等待，1–9 ms）配合 setTimeout（9–50 ms）来获得更精确的计时。这意味着测试结果依赖你填入的刷新率是否与显示器实际刷新率一致——填错会让整条曲线整体偏移，而不是暴露真实问题。
图表各项代表什么
页面上的性能图以毫秒为纵轴（1–100 ms 量级），包含多条曲线和指示器：
| 图表元素 | 颜色 | 含义 |
|---|---|---|
| VSYNC 偏移 | 蓝色 | 每帧实际渲染时刻相对理想 VSYNC 时刻的偏差，是判断同步是否正常的主曲线 |
| 按 rAF 时间的 VSYNC 偏移 | 紫色 | 以 rAF 时间参数为基准计算的偏移，用于交叉验证蓝色曲线 |
| 帧间隔 | 绿色/红色 | 相邻两帧之间的时间差；绿色表示接近目标间隔，红色表示偏离（掉帧或抖动） |
| 渲染时间 | 棕色（右侧刻度） | 浏览器完成该帧渲染所花的时间 |
| spin-wait 等待 | 灰色 | 为对齐 VSYNC 而主动自旋等待的时长 |
| VSYNC 指示器 | — | 直观显示当前帧是否被判定为“锁定”或“迟到” |
此外还有鼠标输入延迟指示器（以帧为单位，0–9），用于观察输入事件到画面更新之间隔了几帧。
如何根据图表判断异常
- 正常：蓝色偏移曲线基本平直，帧间隔以绿色为主，渲染时间和 spin-wait 在合理范围内波动。
- 掉帧：帧间隔曲线出现红色尖峰，通常对应一次错过 VSYNC 周期；如果伴随蓝色偏移跳变，说明该帧被推迟到下一个刷新周期。
- 同步漂移：蓝色曲线呈缓慢上升或下降的斜坡，说明浏览器回调节奏与显示器刷新率存在系统性偏差。
- 规律性摆动：曲线呈周期性锯齿，常见于浏览器计时器精度不足或后台负载干扰。
页面还提供“每 N 帧丢弃 1 帧”（1–200）、“奇偶帧前后延迟”（0–20 ms）、“撕裂辅助条”等压力选项，用来主动制造异常，观察图表是否能如实反映——这比只看静态曲线更能验证测试本身是否可信。
使用前提与常见卡点
使用前需要确认：显示器实际刷新率与页面设定一致；关闭可能干扰计时的后台程序；使用页面明确支持的浏览器（Chrome 可用，但页面提示其存在 VSYNC 问题并提供了专门的 bug 测试入口）。常见卡点包括：把刷新率填错导致曲线整体偏移、在笔记本省电模式下测试得到偏高的帧间隔、以及把浏览器自身的计时抖动误判为显示器问题。测试结果反映的是“浏览器 + 系统 + 显示器”整条链路的同步表现，不能单独归因于某一环节。