我正在尝试使用 Chrome Devtools 调试我的滚动性能。
我有一个元素列表，例如：
<ul>
<li></li>
...
</ul>
我记录了滚动页面并得到以下信息：
这里令人困惑的部分是我找不到延迟的原因。正如我所看到的，事件/复合层之间存在“透明”条和“间隙”，但我不能指出导致帧速率不佳的一些长时间操作。
我读错了吗？
【问题讨论】：
标签： css performance scroll google-chrome-devtools frame-rate
你基本上在这里做得很好。在大多数情况下，我们会在 Blink 中定时更新屏幕以映射到 60Hz，因此如果您看到一个透明条，则表示 Blink 基本上是在等待 16 毫秒帧结束时处于空闲状态。
您还可以在栏的底部看到少量的绿色和黄色，这是您实际正在做的工作量（很小）。所以你可能有 - 比如说 - 1 或 2 毫秒在那里工作，剩下 14 毫秒来填写，我们将其显示为透明条。
有时您会看到那些条形超过 60fps 线的尖峰。那是因为调度。有时 Chrome 必须等待 CPU 或 GPU 时间，这可能意味着帧运行的时间比预期的要长。通常这些都是非常小的，不会对用户体验产生太大影响（或根本不会），所以我想说值得关注的是你是否在酒吧里有空余空间，你这样做了。 FWIW 确保 Chrome 是唯一在隐身窗口中运行和测试的应用程序是测试 fps 的“最纯粹”的方式。其他正在运行的应用程序可能会因为它们也需要 CPU 和 GPU 而扭曲您的结果。
不过，在您的情况下，您离 Chrome 的极限还差得很远（因为每一帧都有大量的空闲时间），所以我怀疑任何长时间运行的帧都会成为问题调度程序或操作系统需要优先考虑其他事情。
【讨论】：
如果您查看右侧的帧率指标，您会发现很少有帧数低于 30 fps，因此您的表现相当不错。这些事件可能表明您的滚动本身。你有我们可以查看的公共网址吗？
此外，如果您的页面具有复杂的背景（即一些纹理），它将对您的滚动性能造成很大的影响，因为它需要在滚动时重新绘制更大的页面区域。
【讨论】：