滚动流畅度测试 – 检测滚动卡顿

这项滚动流畅度测试所测量的，正是你日常遇到最多的一种运动：一个页面或列表随着你的手指或滚轮而移动。滚动往往是卡顿最先暴露出来的地方，因为它无时无刻不在发生，而你的眼睛也早已熟练地能够读出其中的差别。页面移动时的一顿一顿、内容流在你轻扫时的跳跃、文档逐行滚动时的抖动——这一切归根结底都取决于：当内容处于运动状态时，浏览器能否在每一次刷新时都及时送出一帧新画面。本测试会以每帧固定的步长滚动一整条带有编号的高长行块，并统计延迟到达的帧数。

由于这些行带有清晰的数字和分明的边缘，你的眼睛可以直接判断其流畅程度，而计量表则会为它给出一个具体数值。这样一来，你就能用数据、而不是模糊的印象来对比不同的浏览器、扩展程序和机器。

如何使用滚动测试

页面一加载完成，行块就会自行开始滚动。要想读懂它：

• 观察行的移动。流畅的滚动看起来像是一条连续不断的滑行；而卡顿看起来则像是行在经过时发生跳跃或迟疑。
• 用眼睛跟随某个行号，看着它一路向上移动。如果它匀速滑动，说明时序良好；如果它突然一顿，说明有一帧延迟了。
• 读取计量表。预期帧时间是你正常情况下每帧之间的间隔，最差帧间隔是记录到的最长延迟，卡顿次数则统计了每一个延迟到达的帧。
• 试试全屏模式，并调整速度以匹配你平常的滚动方式——是缓缓地阅读，还是快速地轻扫。

使用重置计量表可以开始一次全新的统计。让测试持续运行三十秒，会比匆匆一瞥给出更真实的画面，因为后台的卡顿往往时有时无。

滚动为什么会卡顿

流畅的滚动要求浏览器在每次刷新时都产出一帧新画面——在 60 Hz 下每 16.7 毫秒一帧，在 120 Hz 下每 8.3 毫秒一帧——与此同时还要运行页面本身。一旦有任何东西拖慢了这项工作，就会漏掉一帧，滚动便会跳动。常见的元凶都很具体，也都可以修复。

沉重的页面和脚本

大尺寸图片、复杂的布局和繁忙的脚本，会让每一帧滚动画面的绘制都变得代价高昂。那些在每次滚动事件上都要运行代码的页面尤其容易卡顿。这既是页面的属性，也是你机器的属性，这正是为什么在同一台电脑上，有些网站滚动流畅，而另一些却不然。

浏览器扩展程序

内容拦截类、购物类和无障碍类扩展程序会在页面移动时对其进行检查。仅仅一个优化欠佳的扩展程序，就足以为每帧增加恰好足够多的工作量，从而造成肉眼可见的卡顿。在隐私窗口中测试（大多数扩展程序在其中会被禁用）是一种快速的检查方法。

合成与硬件加速

浏览器会尝试把滚动交给 GPU 处理，好让它即便在页面繁忙时也能保持流畅。当硬件加速被关闭，或者某个页面强行把工作推回主线程时，滚动就会退回到较慢的路径并出现卡顿。在浏览器设置中开启硬件加速通常会有所帮助。

省电与后台负载

与任何运动一样，处于省电模式的笔记本电脑、因过热而自我降频的设备，或是抢占 CPU 时间的后台任务，都会让帧延迟到达。滚动测试所反映的，正是主宰其他各类运动的那同一套系统健康状况。

怎样才算好结果

健康的滚动应当是一个又高又稳的帧率，卡顿次数接近于零，最差帧间隔也接近于预期帧时间。下表列出了常见刷新率所对应的目标帧时间——也就是滚动时测试数值应当徘徊在其附近的那个值。

更高的刷新率会让滚动看起来明显更流畅，但前提是浏览器能够持续填满那个更紧的预算。请用我们的刷新率指南确认你实际运行的刷新率，并在主 FPS 测试上测量你的原始帧率。

如何让滚动更流畅

• 开启硬件加速，在浏览器设置中进行设置，让滚动在 GPU 上运行。
• 逐个禁用沉重的扩展程序，或者在隐私窗口中测试，以找出元凶。
• 关闭后台负载，并让设备保持凉爽、接通电源。
• 提高刷新率（如果你的显示器支持的话），然后重新测试，以确认浏览器能够跟得上。
• 更新你的浏览器和显卡驱动，它们往往会带来合成器和滚动方面的改进。

如果这里的滚动卡顿，但游戏却运行流畅，那么原因通常出在浏览器或页面上，而不是你的硬件。如果各处的运动都很粗糙，就用卡顿测试单独测量它，它使用的是同一个帧时间计量表，只是没有滚动内容。

常见问题

这里滚动很流畅，但在某些网站上却卡顿。为什么？

因为流畅度既取决于页面，也取决于你的机器。沉重的脚本、大尺寸图片和滚动事件处理程序，会让某些网站的滚动代价高昂。这里得到干净的结果，意味着你的浏览器和硬件是有能力的；瓶颈在于那个繁忙的网站。

更高的刷新率会让滚动更流畅吗？

会，前提是浏览器能在每次刷新时都送出一帧。120 Hz 的屏幕比 60 Hz 的滑动得更顺滑，但只有在页面能持续填满那个更短的帧预算时才成立。如果做不到，你只是会更早地看到卡顿而已。

为什么同一个页面在两个浏览器里滚动效果不同？

不同浏览器在如何合成、如何把滚动交给 GPU，以及扩展程序如何挂接到页面上等方面各有差异。在完全相同的硬件上，一个浏览器把页面滚动得很流畅，而另一个却卡顿，是很常见的现象。

这和卡顿测试是一回事吗？

它们共用同一个帧时间计量表，但本测试驱动的是真实的滚动内容穿过浏览器的合成器，而这正是大多数人所关心的日常场景。卡顿测试则把原始帧时序单独隔离出来，不带滚动层。

这测试的是我的显示器还是我的浏览器？

主要是你的浏览器以及运行它的机器。这些行是穿过浏览器的渲染和合成路径而移动的，所以糟糕的结果通常指向浏览器、某个扩展程序或系统负载，而不是显示面板。你的显示器仍然设定了上限——60 Hz 的屏幕永远不可能像 120 Hz 的那样流畅滚动——但假定刷新率是足够的，那么本测试判断的就是软件跟得有多好。

流畅滚动设置与高刷新率滚动

大多数浏览器和操作系统都提供一个流畅滚动选项，它会为每一步滚动做出动画过渡，而不是直接跳动。它让运动看起来更柔和，但它并不能凭空创造出浏览器画不出来的帧——如果页面很沉重，流畅滚动只是把卡顿做成了动画而已。真正的收益来自于高刷新率，再配上一个足够轻量、跟得上节奏的页面。在 120 Hz 的屏幕上，滚动一个简单页面明显比 60 Hz 上更流畅，因为用了两倍多的帧来描述同一段运动。本测试让你能够确认，你的浏览器是真的送出了这些帧，而不是丢掉了其中的一半。

移动端、触控板和滚轮滚动

你滚动的方式，会改变你所感受到的东西。鼠标滚轮以离散的步长移动，因此流畅度取决于浏览器在这些步长之间的动画做得有多好。触控板或触摸屏则是连续滚动，并会被交给合成器处理，这通常是最流畅的路径——但同时也最容易暴露丢帧，因为你的手指设定了一个屏幕必须去匹配的预期。手机和平板在这方面尤其敏感，因为滚动是你在其中浏览一切内容的主要方式。如果一个页面在你手指下卡顿、而在滚轮下却不卡，那说明合成器正被迫等待主线程。

无卡顿滚动取决于什么

流畅滚动是一条链条，最薄弱的一环决定了最终结果：页面必须足够轻量、能及时绘制完成，浏览器必须把滚动交给 GPU，系统不能繁忙或降频，而显示器也必须有足够的刷新余量来显示这些帧。本测试会一次性检验整条链条。当数值良好时，说明每一环都撑住了；当数值糟糕时，上面的各个小节会帮你缩小范围，找出该最先查看哪一环。正因为滚动如此普遍，小小的改进就能处处见效——一次浏览器更新、禁用一个扩展程序，或是切换到硬件加速，都可能把一个卡顿的结果提升为干净的结果，而此后你在访问的每一个网站上都会感受到这份差别。

相关的显示与运动测试

滚动只是运动性能中日常的一个切面。继续使用这些配套工具：

• 帧率测试（FPS 测试）——测量你的实时帧率和刷新率。
• 运动模糊测试——看看你的屏幕把运动细节涂抹得有多严重。
• 跳帧测试——检查显示面板是否绘制了每一帧。
• 画面撕裂测试——检查各帧是否与刷新对齐。
• 卡顿测试——在软件层面测量帧时间的一致性。