如何使用 vsynctester.com 的自定义 Hz、延迟与压力测试选项

vsynctester.com 的自定义参数面板适合在默认测试之外做更精细的排查：你可以把刷新率设成 1–500 Hz 之间的任意值、加入毫秒级偏斜、用 spin-wait 提高计时精度，再叠加背景图、滚动、丢帧等压力项，观察浏览器 VSYNC 同步是否仍然稳定。前提是使用支持高刷新率的浏览器——按该站页面说明，Chrome 存在 VSYNC 问题，Firefox 在 Windows 下 VSYNC 被描述为损坏，Edge 和 IE 不支持高 Hz 显示器，因此这些结论本身也是测试时要留意的背景。所有参数都在同一页面调整，改完直接看图表变化即可。

先认识图表，再调参数

调参前需要知道每个图形对应什么，否则改了参数也看不出效果。页面上的图表包含以下元素：

页面还提供“Use rAF time arg as frame time”开关，把 rAF 回调的时间参数直接当作帧时间使用。理解这几条曲线后，下面每个参数的作用就对应到具体某条线的变化上。

自定义 Hz 与 skew：模拟目标刷新率

• Custom Hz（1–500）：把测试的目标刷新率设成任意值。用途是验证浏览器在你实际使用的刷新率下能否保持同步，比如 144 Hz、240 Hz 显示器，或反过来用低 Hz 观察同步行为。范围上限 500 Hz 意味着可以测试远超常见显示器的值，用来观察浏览器在高负载下的同步极限。
• skew ms（0–25）：给帧时间加入毫秒级偏斜。当同步“差一点点”时，小幅偏斜能帮你判断浏览器是稳定锁定还是处于临界抖动状态。

调整这两个值时，重点看蓝色偏移线是否稳定锁定、帧间时间是否出现红绿交替的抖动。

精确计时：spin-wait 与 setTimeout 上限

浏览器的普通定时器精度有限，这两个参数用来收紧计时：

• spin-wait 上限（1–9 ms）：用自旋等待补足定时器精度不足的部分，数值越大计时越精确，但会占用更多 CPU。
• setTimeout 最大值（9–50 ms）：控制 setTimeout 单次等待的上限。

建议从默认值开始，先观察灰色 spin-wait 曲线占用的比例；如果帧间时间波动明显，再逐步提高 spin-wait 上限，同时留意渲染时间（棕色线）是否被推高。

压力测试：背景图、滚动与丢帧模拟

这些选项用来在负载下检验同步稳定性：

• 背景图片 MP（1–99）与预览数量（1–20）：页面说明中提到，Chrome 的 VSYNC 问题测试会切换到更大的 44MP 背景图。你可以自行设定背景图大小和预览数量，观察大图渲染对同步的影响。
• Stress Scroll（每帧 1–50 像素）：每帧强制滚动指定像素数，模拟持续滚动页面时的同步表现。
• Drop 1 in every N frames（1–200）：每 N 帧故意丢一帧，用来观察浏览器在丢帧后的恢复能力，以及图表上帧间时间如何反应。
• Tear helper/bar（1–20 像素）：撕裂辅助条，用于观察画面撕裂与同步的关系。
• Frames indicator（5–33 像素）：帧指示器的尺寸。

压力项建议一次只加一个，确认图表变化后再叠加，否则很难判断是哪一项导致的异常。

输入延迟与奇偶帧延迟

• Mouse input lag indicator frames（0–9）：用帧数表示鼠标输入延迟的指示器，数值决定指示器覆盖的帧数范围。
• Odd Even frame pre-delay / post-delay（各 0–20 ms）：对奇数帧和偶数帧分别施加前置或后置延迟。这是排查奇偶帧同步差异的实用手段——如果奇偶帧表现不一致，单独给其中一类加延迟就能放大差异，便于观察。

验证方法与常见卡点

改完参数后，判断测试是否有效的标准是：蓝色偏移线稳定锁定、帧间时间没有持续的红绿抖动、spin-wait 占比在可接受范围。常见卡点有三个：一是浏览器本身不支持高 Hz（按该站说法，Edge/IE 不支持高 Hz 显示器），此时高 Hz 设置下的异常不能归因于参数；二是 spin-wait 开得过高导致 CPU 占用上升，反而引入新的抖动；三是压力项叠加过多，图表噪声大到无法判读。遇到这些情况，先回到默认参数确认基线，再逐项加回。

页面底部还链接了 Display Hz Tester、GPU memory usage 等同类工具，以及“How to compute VSYNC / Hz”和“Input lag in HTML5 games”等说明文章，需要进一步理解原理时可以从这些入口查看。