Javascript 延迟长时间运行的计时器任务以提高滚动平滑度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37367200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deferred long-running timer task(s) to improve scrolling smoothness
提问by nonstop328
I was inspecting my page and I got this warning:
我正在检查我的页面，我收到了这个警告：
Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343
延迟长时间运行的计时器任务以提高滚动平滑度。见 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/railand https://crbug.com/574343#c40for more information.
Blink 推迟了一项任务，以使滚动更流畅。为避免这种情况，您的计时器任务的运行时间应少于 50 毫秒。请参阅https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail和https://crbug.com/574343#c40了解更多信息。
What is this?
这是什么？
回答by Garbee
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 andthere is user touch input. It's done to prioritize handling user input (like scrolls and taps) above what the site is doing.
这发生闪烁（Chrome的渲染引擎）决定延迟执行计时器（如函数传递给requestAnimationFrame，setTimeout或setInterval），因为这些功能通常采取> 50ms的执行和存在用户触摸输入。这样做是为了优先处理用户输入（如滚动和点击）高于网站正在执行的操作。
If you've encountered this message, then its likely your users will get similar behavior. Here's how to reproducethis scenario:
如果您遇到过此消息，那么您的用户很可能会得到类似的行为。以下是重现此场景的方法：
- Have long-running javascript that is triggered via timers
- Be on mobile (or emulating it with DevTools device mode)
- 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.
- The devtools' experimental CPU throttlingwill make the JS take longer and give you a better chance of seeing it.
- 有通过计时器触发的长时间运行的 javascript
- 在移动设备上（或使用 DevTools 设备模式模拟它）
- 有触摸输入，在屏幕上用手指向下滚动是最可靠的。点击或翻页也可能触发它，但它不太可能且难以重现。
- devtools 的实验性CPU 节流将使 JS 花费更长的时间并让您有更好的机会看到它。
The method for how to solvethis is directly from the referenced issuein the console message down in comment 40:
如何解决这个问题的方法直接来自评论 40 中控制台消息中引用的问题：
- Record a timeline on the page that is triggering the console message about deferral.
- Select the entire timeline and open the "Event Log" pane near the bottom of the window.
- Enter "Timer Fired" into the filter text field. (See image at bottom)
- 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. )
- 在触发有关延期的控制台消息的页面上记录时间线。
- 选择整个时间线并打开靠近窗口底部的“事件日志”窗格。
- 在过滤器文本字段中输入“Timer Fired”。（见下图）
- 在列表中查找“总时间”超过 50 毫秒的计时器。这些是有问题的。（请注意，在浏览器正在处理用户手势的某些情况下，超过 10 毫秒的计时器也会触发此消息。）
You want these functions to execute faster or less frequently.
您希望这些函数执行得更快或更不频繁。
