精打细算浏览器空闲时间

时间: 2018-11-05阅读: 1571标签: 浏览器
来自:奇舞周刊,作者:黄小璐  

有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程。我们可能会面临这样的问题:正在执行的后台任务很耗时,会阻塞高优先级任务的执行,出现卡顿或者无响应的情况。

有同学提出建议:把后台任务拆分到最小的可执行块,将其放到间隔极短的setTimeout中异步执行。这样就不会阻塞主线程上其他任务啦。但是不停地将小任务发给事件循环会带来额外开销,而且实现起来也不优雅。

其实浏览器的主线程在每一帧处理完用户输入、动画计算、合成帧等操作后,通常会处于空闲状态,直到下一帧开始、或者收到新的用户输入、或者pending的任务满足了执行条件等。这段空闲时间应该充分地利用起来。比如用空闲时间来执行后台任务就十分合适。如下图所示,可以在空闲时间执行回调任务:


但是开发者不知道浏览器什么时候空闲,所以要依靠浏览器提供的requestIdleCallbackAPI来实现任务的调度。


requestIdleCallback

这是一个神奇的API:requestIdleCallback(callback, options)。 它的原理是让浏览器在空闲的时候执行回调函数,而且在回调函数中通过参数告知预计还剩多少空闲时间。我们可以根据剩余的空闲时间来合理安排执行的任务量,确保不会影响其他高优先级任务的执行。

用法很简单: 

function doWork(deadline) {
  // 如果还有空闲时间,就继续执行doSomeTask
  while (deadline.timeRemaining() > 5) {
    doSomeTask();
  }
  // 否则,安排到下一次空闲时间执行
  requestIdleCallback(doWork)
}
...
requestIdleCallback(doWork)

 以上代码是最基本的用法。首先requestIdleCallback(doWork)让浏览器在下一次空闲时间执行doWork。在doWork里,通过参数deadline的timeRemaining()方法获得最新的空闲时间还剩多少。如果大于0,表示还有剩余的空闲时间。但是我们还需要评估doSomeTask() 的执行时长,比如预计需要5毫秒,那么当剩余的空闲时间大于5毫秒的时候,继续执行doSomeTask()。否则安排到下一次空闲时间执行。

有人会问,如果浏览器一直忙,岂不是没有机会执行后台任务?所以这个API提供了第二个参数timeout,它表示如果在timeout的时间间隔内callback都没有被调用,那么就像setTimeout那样,到超时时间将callback加入到事件队列中等待执行。代码如下:

function doWork(deadline) {
  // 如果还有空闲时间,或者到超时时间了,就继续执行任务直到做完
  while ((deadline.timeRemaining() > 5 || deadline.didTimeout) && tasks.length > 0) {
    doSomeTask();
  }
  // 否则,剩余的任务安排到下一次空闲时间执行
  if (tasks.length > 0) {
    requestIdleCallback(doWork)
  }
}
...
requestIdleCallback(doWork, 2000)

在以上代码中,如果是因为超时导致的回调,那么timeRemaining()返回0,且didTimeout为true。加上超时时间在一定程度上保证了回调函数执行的时机。但是并不推荐这种做法,因为这样丢失了这个API最重要的意义——充分利用空闲时间。

跟setTimeout类似,requestIdleCallback会返回一个handle,我们可以通过cancelIdleCallback(handle)来取消后台任务调度。


使用场景

上报分析数据。比如用户轻触的时候,需要将该事件上报。为了不影响轻触之后动画的流畅性,可以使用requestIdleCallback实现。

实现模板的预编译和组装。比如在懒加载的页面组装新元素,再用requesAnimationFrame更新到DOM上。注意,不要在requestIdleCallback 中直接修改DOM。


兼容性


目前这个API的兼容性还比较欠缺,而且标准还在迭代中,需要等待一段时间。网上有用setTimeout实现的方案可以做为降级。  


参考文档:

  • https://www.w3.org/TR/requestidlecallback/

  • https://developers.google.com/web/updates/2015/08/using-requestidlecallback

  • https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1260

关闭

JS检测CSS属性浏览器是否支持的多种方法

原生CSS.supports语法返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。不考虑兼容性,对CSS的进行检测使用 CSS.supports() 方法,要检测IE浏览器使用赋值取值法。

Puppeteer浏览器控制器_介绍Puppeteer的一些用法

Puppeteer是Chrome团队开源的Node库,其提供基于DevTools协议的高阶API让开发人员能够控制Headless Chrome、Chromium、Chrome等浏览器,通过Puppeteer能够将平时手动使用浏览器的操作通过代码的方式自动化执行

禁止(防止)浏览器自动填充密码

由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西

浏览器工作原理学习笔记

DOM:渲染引擎解析 HTML 文档,构建 DOM Tree,Computed Style:解析对应的 CSS 样式信息,生成 document.styleSheets,计算 DOM 样式,布局(reflow/layout):计算布局信息,生成布局树 LayoutTree

如何处理浏览器的断网情况?

好的断网处理会让人很舒适:lol的断线重连,王者荣耀的断线重连 可以确保游戏的继续进行,坏的断网处理甚至不处理会出bug:比如我手上的项目就出了个bug 业务人员表示非常苦恼

浏览器缩放,会导致布局打乱,解决方法?

在刚学会做自适应的时候,我们喜欢用百分比定义宽度,却会遇到这样一个现象,如果页面头部样式定义了宽度100%,那么当浏览器窗口缩放的时候就会发现有部分内容被截断或显示不全。 原因通常就是你的元素浮动了

重探浏览器事件(浅析事件编程化)

在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来.不过有意思的一点是,在看完高程的N年后我居然连event对象中的target和currentTarget属性的区别都忘记了.

Chrome浏览器语音自动播放功能

Chrome浏览器为了屏蔽带声音的骚扰广告,从66版本后不再允许自动播放语音,我做的项目需要实时语音提示报警信息,网上搜索了好久都说不再支持自动播放,知道碰到一个大神提供建议设置Chrome浏览器允许声音自动播放:

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

浏览器的Event Loop

进程和线程都是CPU工作时间片的一个描述。进程描述了CPU在运行指令及加载和保存上下文所需的时间,放在应用上来说就代表了一个程序。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!