Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告

落日映苍穹つ 2022-04-06 10:51 41阅读 0赞

在项目中做angularjs短信验证码及秒倒计时这样的功能时，F12有时候能看到“Deferred long-running timer task(s) ”的警告。

网上查到相关的解释，特意写在这里，以免忘记。

**　　浏览器中报错的信息如下：**

![ea0cbce7-f7b3-382f-a81d-e581981b2440.jpg][]  
**　　答案描述：**

这个问题主要发生在当Blink(Chrome的渲染引擎)决定延时执行一个定时器函数的时候。比如：通过requestAnimationFrame,setTimeout,setInterval这些对象执行的函数。因为这些对象在执行函数时至少要花费50ms的时间，如果在这个时候刚好有用户在网页上输入操作，Blink会优先执行用户的输入操作（比如：scrolls事件，tap事件）。

如果你的JavaScript代码在运行时也出现了这样的问题，可能是使用者触发了同样的“行为”（指在执行定时器函数时，刚好有用户在操作）。下面有几种方式来复现这个问题：

1.通过timer（定时器函数）触发了一段执行时间比较长的JavaScript代码；

2.在移动端（或者是在开发者工具中模拟移动设备的模式下）；当手指与屏幕发生了真实的接触，并且发生了输入或者是滚动的行为。触摸页面或是快速的滚动页面也会触发这个问题，但是非常少见的而且不容易复现的。

3.使用开发者工具中的“CPU throttling”模式延长JavaScript代码执行时间，可以让你有更好的时机去复现该问题；在console(控制台)中打印的消息指向的问题（chromium平台bug列表），可以从第40条评论中直接找到解决该问题的方法：

在导致“deferral”的页面打开开发者工具记录时间线；选择整个时间线，然后在窗口底部打开“Event Log” 面板。在文本输入框中（Filter过滤的字段）中输入“Timer Fired”，在列表中查找“总时间”超过50毫秒的定时器函数。这就是问题的所在。（当浏览器在处理用户的手势的情景下，定时器函数执行超过10毫秒也会触发该消息）

![a8e15ca7-b602-3e7e-b907-6034380333f4.jpg][]  
**　　英文原文：**

如果阅读中文后还无法理解可以参考英文截图：

![6ef2aae6-e155-32ae-b71d-799646fcb55f.jpg][]

文章来源：[http://blog.csdn.net/yisuowushinian/article/details/52007694][http_blog.csdn.net_yisuowushinian_article_details_52007694]

原文地址：[https://stackoverflow.com/questions/37367200/deferred-long-running-timer-tasks-to-improve-scrolling-smoothness][https_stackoverflow.com_questions_37367200_deferred-long-running-timer-tasks-to-improve-scrolling-smoothness]

[ea0cbce7-f7b3-382f-a81d-e581981b2440.jpg]: /images/20220406/b4203cc5b49641c68c250d0c1b5e66af.png
[a8e15ca7-b602-3e7e-b907-6034380333f4.jpg]: /images/20220406/dbaa69507e124fa98db9ff8854e93fd4.png
[6ef2aae6-e155-32ae-b71d-799646fcb55f.jpg]: /images/20220406/061acb5626dd4f9fb7062dcd653ce418.png
[http_blog.csdn.net_yisuowushinian_article_details_52007694]: http://blog.csdn.net/yisuowushinian/article/details/52007694
[https_stackoverflow.com_questions_37367200_deferred-long-running-timer-tasks-to-improve-scrolling-smoothness]: https://stackoverflow.com/questions/37367200/deferred-long-running-timer-tasks-to-improve-scrolling-smoothness