`

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

阅读更多

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

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

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


  答案描述:

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


  英文原文:

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

 

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

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

  • 大小: 90 KB
  • 大小: 207.2 KB
  • 大小: 452.2 KB
分享到:
评论

相关推荐

    android-deferred-object, 在 jQuery http上,Android实现延迟对象 Pattern的实现.zip

    android-deferred-object, 在 jQuery http上,Android实现延迟对象 Pattern的实现 Android延迟对象Android-Deferred-Object是一个of实用工具对象,可以以将多个回调 register 调回回调队列,调用回调队列和异步功能...

    deferred-promise-ts

    它利用 ES6 承诺并实现 Promise 接口正在解决的问题允许延迟解决承诺主要特征一个 DeferredPromise 类,既满足 Promise 接口,也允许触发 Promise 解析安装 // npm npm i @ablestack/deferred-promise-ts --save // ...

    deferred-view-model:允许传递 promises() 对象以查看的 Express 中间件

    本文将深入探讨"deferred-view-model"这一Express中间件,它允许开发者在处理视图模型时使用Promise对象,从而更好地管理异步操作。 首先,Promise是JavaScript中的一个核心概念,用于处理异步操作。当一个操作可能...

    promise-helper-for-deferred-style-resolve:简单的承诺助手,用于在 jQuery.deferred 等承诺构造函数之外调用 resolve

    promise-helper-for-deferred-style-resolve 延迟样式解决的承诺助手。 您可以轻松编写测试,无需任何 jQuery。 测试模式的想法来自 。 jQuery.deferred()可以调用d.resolve() ,但是Promise不能调用p.resolve()...

    deferred-unit-test:示例:在生命周期方法中使用延迟对象测试异步操作

    `deferred-unit-test` 提供了一种利用延迟对象(Deferred)进行单元测试的方法,尤其是在测试生命周期方法中的异步行为。这个示例旨在帮助开发者理解如何有效地测试那些包含异步逻辑的代码。 首先,让我们深入了解...

    android-deferred,.zip

    在`android-deferred-master`这个压缩包中,包含了项目的源代码、示例、测试用例以及可能的文档。通过查看源代码,开发者可以学习到如何实现这样的异步处理框架,包括如何定义状态、如何触发回调以及如何设计一个...

    deferred3d-parallel-game-engine

    #自述文件 D3D - 延迟 3D - 并行游戏引擎 设置: 要开始使用 D3D,您需要自己喜欢的编译器和 CMake ( )。 您还需要安装 4 个库:OpenCL(Nvidia 或 AMD APP SDK,具体取决于您的系统)、Bullet Physics、SFML 和 ...

    谈谈jQuery之Deferred源码剖析

    jQuery的Deferred对象是jQuery在ES6的Promise概念出现之前的一种实现,它允许开发者将异步操作的结果通过链式调用的方式处理,避免了传统的层层嵌套的回调函数的写法,让代码的可读性和可维护性更高。 - **Deferred...

    OF-deferred-old-tasks-to-now:Omnifocus Task Manager的AppleScript,可让您再次从预测角度查看旧的延迟任务

    该脚本扫描OmniFocus前端文档中的所有项目和操作组,以标识任何具有今天之前的延迟日期的项目,并将其延迟日期更新到今天,以便它们保留在“预测透视图”视图中。 要求 概要 作者可以在其博客上找到的。 安装 要将...

    pex-exp-deferred-rendering-explained:延迟渲染博客文章代码

    在JavaScript中,Pex库提供了一个强大的工具集,可以帮助开发者更容易地实现延迟渲染。`pex-exp-deferred-rendering-explained-master`这个压缩包可能包含了一个示例项目,展示了如何使用Pex库来创建延迟渲染的WebGL...

    在jQuery 1.5中使用deferred对象的代码(翻译)

    jQuery中的Deferred对象是1.5版本引入的重要特性,它主要用于处理JavaScript中的异步编程模式。在传统编程中,异步操作的处理较为复杂,常常需要嵌套回调函数,使得代码难以阅读和维护。而Deferred对象提供了一种更...

    在jQuery1.5中使用deferred对象 着放大镜看Promise

    总的来说,jQuery 1.5中的`Deferred`对象和`Promise`概念是异步编程的强大工具,它们提供了一种优雅的方式来处理异步操作的回调。通过使用`$.ajax()`返回的`Promise`对象,开发者可以安全地绑定回调,而不必担心意外...

    Deferred:Deferred JS 库 - JQuery Deferred 的替代品

    只需在页面中包含 Deferred.js 文件。 例如: < script src =" /js/Deferred.js " > </ script > 并开始使用它。 代码示例 // Simple asynchronous function written using Deferred object ...

    OpenGL-Deferred.zip

    总的来说,OpenGL-Deferred.zip项目提供了一个实践延迟渲染的平台,可以帮助开发者深入理解高级渲染技术,同时锻炼他们在Visual Studio中使用OpenGL编程的能力。通过研究和运行这个项目,你可以学习到计算机图形学、...

    jQuery中的deferred对象和extend方法详解

    jQuery中的`deferred对象`和`extend方法`是JavaScript异步编程的重要工具,尤其在处理AJAX请求和其他异步操作时非常有用。`deferred对象`是jQuery 1.5.0版本引入的,它提供了一种更优雅的方式来管理回调函数,解决了...

    emacs-deferred:emacs lisp的简单异步函数

    样例代码您可以在deferred-sample.el找到以下示例代码。 执行eval-last-sexp (Cx Ce),您可以尝试使用这些代码。基本用法这是一个基本的递延链。 此代码将一些输出放入消息缓冲区,然后需要minibuffer中的数字。 ...

    pex-exp-deferred-rendering:在 WebGL 中使用球体剪裁灯光进行延迟渲染

    总结来说,"pex-exp-deferred-rendering"是一个关于WebGL延迟渲染的项目,特别关注球体剪裁灯光技术,使用JavaScript语言实现。它涉及到图形学的高级渲染策略,包括G-Buffer、光照计算和后期合成,对于想要提升WebGL...

    deferred-leveldown:在打开实际的abstract-leveldown实例时将操作排入队列的abstract-leveldown实现

    put() , get() , del() , batch()和clear()操作全部排队并保留在内存中,直到通过deferred-leveldown的open()方法open()了与abstract-leveldown兼容的对象。 batch()操作将全部重播为数组形式。 链接的批处理...

    cute-deferred-shading:可爱的小延迟着色实现

    《cute-deferred-shading:可爱的小延迟着色实现》 在计算机图形学的世界里,延迟着色(Deferred Shading)是一种高级的渲染技术,它通过改变传统的渲染流水线来提高性能和灵活性。"cute-deferred-shading"项目提供...

    OpenGL-Deferred-Lighting:使用延迟着色的 OpenGL 无限光源照明!!!!

    OpenGL-Deferred-Lighting 是一个基于 OpenGL 的 3D 引擎,它专注于实现延迟着色技术,以处理无限光源的照明问题。延迟着色是一种在现代图形编程中广泛使用的高级光照技术,它与传统的前向渲染不同,可以有效解决...

Global site tag (gtag.js) - Google Analytics