欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-14 21:36:14
...

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

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

  浏览器中报错的信息如下:

Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
            
    
    博客分类: JavaScript chromeDeferredJavaScript 
  答案描述:

  这个问题主要发生在当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毫秒也会触发该消息)

Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
            
    
    博客分类: JavaScript chromeDeferredJavaScript 
  英文原文:

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

Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
            
    
    博客分类: JavaScript chromeDeferredJavaScript 

 

  文章来源:http://blog.csdn.net/yisuowushinian/article/details/52007694

  原文地址:https://*.com/questions/37367200/deferred-long-running-timer-tasks-to-improve-scrolling-smoothness

  • Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
            
    
    博客分类: JavaScript chromeDeferredJavaScript 
  • 大小: 90 KB
  • Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
            
    
    博客分类: JavaScript chromeDeferredJavaScript 
  • 大小: 207.2 KB
  • Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
            
    
    博客分类: JavaScript chromeDeferredJavaScript 
  • 大小: 452.2 KB