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

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

推迟长时间运行的计时器任务以提高滚动平滑度。请参阅 crbug.com/574343

我还见过：

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

这是什么？

当 Blink（Chrome 的渲染引擎）决定延迟执行计时器（就像传递给requestAnimationFrame, setTimeout, or setInterval）因为这些函数通常需要 >50ms 来执行and有用户触摸输入。这样做是为了优先处理用户输入（例如滚动和点击），而不是网站正在执行的操作。

如果您遇到此消息，那么您的用户很可能会遇到类似的行为。这是如何重现这种情况：

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

方法为怎么解决这是直接来自参考问题 https://bugs.chromium.org/p/chromium/issues/detail?id=574343#c40在控制台消息中的注释 40 中：

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

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