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

翻译 2016年07月23日 22:46:24

原文地址:http://stackoverflow.com/questions/37367200/what-is-the-deferred-long-running-timer-tasks-warning-in-the-chrome-devtools

在开发过程中遇到了题目描述的问题,使用 Google 搜索,中文答案很少,而且没有令人满意的。就在segmentfault上提了一个问题,而且很快我就发现被很多人收藏了该问题(SF网站问题被收藏时,会收到消息提醒)。也有一些网友回答该问题,但是一直没有优质的答案。

后来在 Stack overflow 找到比较好的答案,这个回答也是点“赞”数想当高的。英文好的同学建议直接阅读英文,英文不好的同学可以阅读下面我的翻译(英文水平有限,没有按照字句翻译,只是根据我对他们的理解来翻译)。

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

答案描述:

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

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

  1. 通过timer(定时器函数)触发了一段执行时间比较长的JavaScript代码;
  2. 在移动端(或者是在开发者工具中模拟移动设备的模式下);
  3. 当手指与屏幕发生了真实的接触,并且发生了输入或者是滚动的行为。触摸页面或是快速的滚动页面也会触发这个问题,但是非常少见的而且不容易复现的。
  4. 使用开发者工具中的“CPU throttling”模式延长JavaScript代码执行时间,可以让你有更好的时机去复现该问题;

console(控制台)中打印的消息指向的问题(chromium平台bug列表),可以从第40条评论中直接找到解决该问题的方法:

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

英文原文

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


图片名称

记录js定时器产生 Deferred long-running timer task(s) to improve scrolling smoothness

某日,在前台js中有一个倒计时发短信的需求,一次发送后,间隔60s才能继续发送,在页面调试的时候发现出现 Deferred long-running timer task(s) to improve ...
  • u012811805
  • u012811805
  • 2017年02月09日 20:59
  • 3875

HTML5摇一摇以及音频播放问题优化总结

前言感想:不放过任何一个WARNING、ERROR或者不够好的体验点,持续不断优化,精益求精,我们就能够得到提高。 1. HTML5摇一摇效果监测 2. 微信浏览器Audio播放优化...
  • zhuizhuziwo
  • zhuizhuziwo
  • 2016年07月07日 17:11
  • 20333

APICloud框架——总结一下最近开发APP遇到的一些问题 (二)

高度自适应flex布局 允许子元素伸缩手机号正则function checkPhone(data){ if(!(/^1[34578]\d{9}$/.test(data))){ ...
  • qq_22844483
  • qq_22844483
  • 2017年07月15日 07:29
  • 713

HTML5摇一摇以及音频播放问题优化总结

前言感想:不放过任何一个WARNING、ERROR或者不够好的体验点,持续不断优化,精益求精,我们就能够得到提高。 1. HTML5摇一摇效果监测 2. 微信浏览器Audio播放优化...
  • zhuizhuziwo
  • zhuizhuziwo
  • 2016年07月07日 17:11
  • 20333

Timer和TimeTask类(定时调度)学习之秒表计时器

最近在做一个自己的小项目,用到了定时调度(Timer和TimeTask类),特做此记录 Timer类: Timer类是一种线程设施,可以用来实现在某一个时间或某一段时间后,安排某一个任务执行一次,或定...
  • wei18359100306
  • wei18359100306
  • 2015年01月02日 23:53
  • 2664

Timer与TimerTask的真正原理&使用介绍

其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了run方法的一个类,而具体的TimerTask需要由你自己来实现,例如这样: Timer timer = new Time...
  • xieyuooo
  • xieyuooo
  • 2013年02月24日 18:23
  • 31791

当程序到后台后,继续完成Long-Running Task 任务

我们知道,到我们程序从前台退到后台(安home)键后,将执行程序的委托方法。 // 当应用程序掉到后台时,执行该方法 - (void)applicationDidEnterBackgrou...
  • Windgs_YF
  • Windgs_YF
  • 2017年12月28日 14:37
  • 33

UIBackgroundTaskIdentifier当进入后台后,继续完成long_running_task

当程序到后台后,继续完成Long-Running Task 任务 我们知道,到我们程序从前台退到后台(安home)键后,将执行程序的委托方法。 // 当应用程序掉到后台时,...
  • Sun_gh
  • Sun_gh
  • 2015年11月03日 10:00
  • 463

当程序到后台后,继续完成Long-Running Task 任务

当程序到后台后,继续完成Long-Running Task 任务   转载▼ http://blog.sina.com.cn/s/blog_7b9d64af0101cjci.html ...
  • u010486174
  • u010486174
  • 2014年11月26日 17:14
  • 454

当程序到后台后,继续完成Long-Running Task 任务 (2013-04-09 21:27:24)

转载▼ 标签:  long-runningtask   后台任务   applicationdidenterb uibackgroundtaski...
  • MrWei68198
  • MrWei68198
  • 2015年06月04日 15:23
  • 389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Chrome开发者工具中关于“Deferred long-running timer task(s) ”的警告
举报原因:
原因补充:

(最多只允许输入30个字)