延迟长时间运行的计时器任务以提高滚动平滑度

Question

我正在检查我的页面并收到以下警告：

延迟长时间运行的计时器任务以提高滚动流畅度。见 crbug.com/574343

我也看过：

Blink 推迟了一项任务，以使滚动更流畅。您的计时器任务的运行时间应少于 50 毫秒，以避免这种情况。请参阅https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail 和https://crbug.com/574343#c40 了解更多信息。

这是什么？

Answer 1

当 Blink（Chrome 的渲染引擎）决定延迟执行计时器（例如传递给 requestAnimationFrame、setTimeout 或 setInterval 的函数）时会发生这种情况，因为这些函数通常需要 >50 毫秒才能执行 并且有用户触摸输入。这样做是为了优先处理用户输入（如滚动和点击）而不是网站正在执行的操作。

如果您遇到此消息，那么您的用户很可能会遇到类似的行为。以下是如何重现此场景：

1. 拥有通过计时器触发的长时间运行的 javascript
2. 在移动设备上（或使用 DevTools 设备模式进行模拟）
3. 有触摸输入，用手指在屏幕上向下滚动是最可靠的。点击或甩动页面也可能触发它，但它不太可能且更难重现。
4. devtools 的实验性 CPU 节流 将使 JS 花费更长的时间，让您有更好的机会看到它。

如何解决的方法直接来自评论40下方控制台消息中的referenced issue：

1. 在页面上记录触发有关延迟的控制台消息的时间线。
2. 选择整个时间线并打开靠近窗口底部的“事件日志”窗格。
3. 在过滤器文本字段中输入“Timer Fired”。 （见底部图片）
4. 在列表中查找“总时间”超过 50 毫秒的计时器。这些是有问题的。 （请注意，在浏览器正在处理用户手势的某些情况下，超过 10 毫秒的计时器也会触发此消息。）

您希望这些函数执行得更快或更少。