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

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的函数）时会发生这种情况，因为这些功能通常需要> 50ms来执行和有用户触摸输入。完成处理用户输入（如滚动和点击）优先处理网站正在做的事情。

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

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

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

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

您希望这些功能执行得更快或更少。