【reactjs】requestIdleCallback 和 requestAnimationFrame对比

react 16 以后引入了Fiber，对核心算法进行重构，花一些时间来学习研究下，还是蛮有收获的。
大家都知道requestAnimationFrame，在canvas绘制动画方面使用较多，前面应该也对比过
requestAnimationFrame 和 setTimeout (setInterval) ，requestAnimationFrame一些性能优化点，比如说窗口失去焦点后的区别；

requestIdleCallback 这个方法应该比较陌生了，
https://www.w3.org/TR/requestidlecallback/

requestIdleCallback 也是 react Fiber 实现的基础 api 。我们希望能够快速响应用户，让用户觉得够快，不能阻塞用户的交互，requestIdleCallback能使开发者在主事件循环上执行后台和低优先级的工作，而不影响延迟关键事件，如动画和输入响应。正常帧任务完成后没超过16ms，说明有多余的空闲时间，此时就会执行requestIdleCallback里注册的任务。

具体的执行流程如下，开发者采用requestIdleCallback方法注册对应的任务，告诉浏览器我的这个任务优先级不高，如果每一帧内存在空闲时间，就可以执行注册的这个任务。另外，开发者是可以传入timeout参数去定义超时时间的，如果到了超时时间了，浏览器必须立即执行，使用方法如下：window.requestIdleCallback(callback, { timeout: 1000 })。浏览器执行完这个方法后，如果没有剩余时间了，或者已经没有下一个可执行的任务了，React应该归还控制权，并同样使用requestIdleCallback去申请下一个时间片

requestIdleCallback(callback) callback收到默认参数 deadline 包含两个参数

didTimeout 是否超时
timeRemaining() 当前帧还剩多少毫秒

一帧执行多任务举例

let taskQueue = [() => {console.log('task1 start')console.log('task1 end')},() => {console.log('task2 start')// sleep(950)console.log('task2 end')},() => {console.log('task3 start')console.log('task3 end')}]const performUnitWork = (deadline) => {// 取出第一个队列中的第一个任务并执行console.log(`此帧的剩余时间为: ${deadline.timeRemaining()}`)taskQueue.shift()()
}const workloop = (deadline) => {// 如果此帧剩余时间大于0或者已经到了定义的超时时间（上文定义了timeout时间为1000，到达时间时必须强制执行），且当时存在任务，则直接执行这个任务// 如果没有剩余时间，则应该放弃执行任务控制权，把执行权交还给浏览器while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskQueue.length > 0) {performUnitWork(deadline)}// 如果还有未完成的任务，继续调用requestIdleCallback申请下一个时间片if (taskQueue.length > 0) {window.requestIdleCallback(workloop, { timeout: 1000 })}
}
requestIdleCallback(workloop, { timeout: 1000 })

如果在每个任务sleep 大于16毫秒，就会多帧执行任务；

【reactjs】requestIdleCallback 和 requestAnimationFrame对比相关推荐

Reactjs 踏坑指南1：一些概念
Reactjs 踏坑指南1: 知识点什么是React 虚拟DOM JSX 组件生命周期和状态事件单项数据流 Reactjs和Angularjs的对比 React简介 React是一个Faceb ...
requestIdleCallback函数
我们都知道React 16实现了新的调度策略(Fiber), 新的调度策略提到的异步.可中断,其实就是基于浏览器的 requestIdleCallback和requestAnimationFrame两 ...
你应该知道的requestIdleCallback
作者:Randal 链接:https://juejin.im/post/6844903592831238157 来源:掘金 image 我们都知道React 16实现了新的调度策略(Fiber), 新 ...
(中篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂
感恩!~~没想到上篇文章能这么受大家的喜欢,激动不已.?.但是却也是诚惶诚恐,这也意味着责任.下篇许多知识点都需要比较深入的研究和理解,博主也是水平有限,担心自己无法承担大家的期待.不过终究还是需要摆 ...
震惊，使用imba.io框架,得到比 vue 快50倍的性能基准
上图表示了vue, react 以及 imba 在 todo 这个项目中拥有60个 todoItem 不同进行 crud 操作的表现.可以看到 imba 达到了每秒操作5w次以上.如果你也想试一试该测 ...
你需要知道的网页渲染性能优化方法（上）
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步作者:晨风明悟链接:https://zhuanlan.zhihu.com/p/39878259 性能优化上文 ...
_improve-1
类型及检测方式 1. JS内置类型 JavaScript 的数据类型有下图所示其中,前 7 种类型为基础类型,最后 1 种(Object)为引用类型,也是你需要重点关注的,因为它在日常工作中是使用得 ...
js初化加载页面时ajax会调用两次的原因_在前端开发中，有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...
js获取今天剩余时间_js动画，setTimeout/setInterval的不准确
先mark,后期在丰富... 1.前言 css能满足绝大多数的动画,但是还是有一小部分需要用到js.例如scroll setTimeout/setInterval的不准确大家都知道.下面重点说说 r ...

【reactjs】requestIdleCallback 和 requestAnimationFrame对比

一帧执行多任务举例

【reactjs】requestIdleCallback 和 requestAnimationFrame对比相关推荐

最新文章

热门文章