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

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

这发生闪烁(Chrome的渲染引擎)决定延迟执行计时器(像传递给函数requestAnimationFrame,setTimeout或setInterval),因为这些功能通常采取> 50ms的执行和存在用户触摸输入.这样做是为了优先处理用户输入(如滚动和点击)高于网站正在做的事情.

如果您遇到此消息,那么您的用户可能会获得类似的行为.以下是重现此方案的方法:

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

如何解决这个问题的方法直接来自注释40中控制台消息中引用的问题:

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

您希望这些功能更快或更低频率地执行.