资讯专栏INFORMATION COLUMN

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

omgdog / 344人阅读

摘要:在文本输入框中过滤的字段中输入在列表中查找总时间超过毫秒的定时器函数。当浏览器在处理用户的手势的情景下,定时器函数执行超过毫秒也会触发该消息英文原文如果阅读中文后还无法理解可以参考英文截图

原文地址: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代码在运行时也出现了这样的问题,可能是使用者触发了同样的“行为”(指在执行定时器函数时,刚好有用户在操作)。下面有几种方式来复现这个问题:

通过timer(定时器函数)触发了一段执行时间比较长的JavaScript代码;

在移动端(或者是在开发者工具中模拟移动设备的模式下);

当手指与屏幕发生了真实的接触,并且发生了输入或者是滚动的行为。触摸页面或是快速的滚动页面也会触发这个问题,但是非常少见的而且不容易复现的。

使用开发者工具中的“CPU throttling”模式延长JavaScript代码执行时间,可以让你有更好的时机去复现该问题;

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

在导致“deferral”的页面打开开发者工具记录时间线;

选择整个时间线,然后在窗口底部打开“Event Log” 面板。

在文本输入框中(Filter过滤的字段)中输入“Timer Fired”

在列表中查找“总时间”超过50毫秒的定时器函数。这就是问题的所在。(当浏览器在处理用户的手势的情景下,定时器函数执行超过10毫秒也会触发该消息)

英文原文

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86415.html

相关文章

  • 在iframe使用中关数据传递的一些问题

    摘要:之前很少使用这个标签,因为感觉到父子页面之间传递数据不太方便。最近同事做的一组页面中大量的使用了用来嵌入其他页面,由于懒所以只好看看如何在的标签下传递数据。在父页面中使用函数来向子页面发送消息而在子页面中添加这个来接受消息。 之前很少使用IFRAME这个标签,因为感觉到父子页面之间传递数据不太方便。最近同事做的一组页面中大量的使用了IFRAME用来嵌入其他页面,由于懒,所以只好看看如何...

    Object 评论0 收藏0
  • 使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增加单元

    摘要:但是,项目中的一些公共封装,比如公共的组件公用的功能模块等是可以使用单元测试的。因此特为组件库引入单元测试,目的在于能减少组件的,避免重复的发布不必要的包。 项目github地址:https://github.com/yuanalina/installAsRequired这里必须要提前说明,前端项目的单元测试不是必须的,特别是业务型项目,增加单元测试反而会成为累赘,增加开发成本且无意义...

    happen 评论0 收藏0
  • javascript中关new的理解

    摘要:中,实例化一个对象,会用到关键字。这里再解释一下构造函数我们一般把后面的函数称为构造函数,如,其中就为构造函数第四点的,可能比较难理解。有点需要注意如果构造函数内没有返回值,则默认是返回当前上下文,要不然就返回任意非原始类型值。 Javascript中,实例化一个对象,会用到new关键字。 经常有人会问对于一个函数,什么时候该使用new关键字。 在回答这个问题之前,需要先了解清楚new...

    stackvoid 评论0 收藏0
  • 开发 2 个 Chrome 插件中学到的(对新手的 4 个提示和 6 个技巧)

    摘要:提示插件可以重写默认的比如打开新时。这是在插件中定义的,因此不能后面做更改。把你的插件提交到的子版块中。从图中蓝色点开始到后面的两天曲线变化。曲线中间的那个小凸起,是二月份在发布的时候产生的。关于在插件中如何使用的教程在这里。 showImg(https://segmentfault.com/img/remote/1460000008971998?w=1920&h=1080); 本文...

    20171112 评论0 收藏0
  • Crown -- 一款快速检索并切换你的书签与Tabschrome扩展

    摘要:在此期间我的文章会同步更新在以下地方欢迎大家在自己长逛的网站中关注或者我的来了解我的最新消息推荐大家收藏关注我的博客网站,因为我的最新更改与文章只会在这里更新,其他地方的文章可能会存在更新不及时或者忘记更新等问题。 之前一直在找一款现成的已经实现了如标题所说的chrome扩展, 但却一直没有找到, 于是最近花了私底下的一些空闲时间去按照自己所想要的功能去打造了这么一款chrome扩展,...

    SHERlocked93 评论0 收藏0

发表评论

0条评论

omgdog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<