推迟长时间运行计时器任务以提高滚动平滑度 [英] Deferred long-running timer task(s) to improve scrolling smoothness

问题描述

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

我也看到：

眨眼推迟了一项任务，以使滚动更平滑。您的计时器任务应该运行少于50ms以避免这种情况。请参阅 当blink（Chrome的渲染引擎）决定延迟执行一个计时器（例如传递给 requestAnimationFrame ， setTimeout 或 setInterval ），因为这些函数通常需要> 50ms执行和，有用户触摸输入。这是为了优先处理用户输入（比如滚动和点击）而不是网站正在做什么。

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

在移动设备上（或使用DevTools设备模式进行模拟）

触摸输入，用手指向下滚动屏幕是最可靠的。点击或扔掉页面也可能会触发它，但不太可能也难以重现。 devtools的实验性CPU调速会使JS花费更长时间并为您提供更好的机会。 如何解决的方法直接来自控制台消息中的

I was inspecting my page and I got this warning:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343

I've also seen:

Blink deferred a task in order to make scrolling smoother. Your timer tasks should take less than 50ms to run to avoid this. Please see https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail and https://crbug.com/574343#c40 for more information.

What is this?

解决方案

This occurs when Blink (Chrome's rendering engine) decides to delay executing a timer (like a function passed to requestAnimationFrame, setTimeout, or setInterval) because those functions are generally taking >50ms to execute and there is user touch input. It's done to prioritize handling user input (like scrolls and taps) above what the site is doing.

If you've encountered this message, then its likely your users will get similar behavior. Here's how to reproduce this scenario:

1. Have long-running javascript that is triggered via timers
2. Be on mobile (or emulating it with DevTools device mode)
3. Have touch input, scrolling with finger down on the screen is the most reliable. Tapping or flinging the page may also trigger it, but it is less likely and harder to reproduce.
4. The devtools' experimental CPU throttling will make the JS take longer and give you a better chance of seeing it.

The method for how to solve this is directly from the referenced issue in the console message down in comment 40:

1. Record a timeline on the page that is triggering the console message about deferral.
2. Select the entire timeline and open the "Event Log" pane near the bottom of the window.
3. Enter "Timer Fired" into the filter text field. (See image at bottom)
4. Look for timers in the list whose "Total Time" exceeds 50 milliseconds. These are the problematic ones. (Note that timers that exceed 10 milliseconds can also trigger this message in some cases where the browser is processing a user gesture. )

You want these functions to execute faster or less frequently.

这篇关于推迟长时间运行计时器任务以提高滚动平滑度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！