第一模块（课程信息）:
课程名称:2周刷完100道前端优质面试真题
课程章节:第五章第十七节 requestAnimationFrame和requestIdleCallback区别？
主讲老师:双越
第二模块（课程内容）:
课程内容概述
是否了解过requestIdleCallback和requestAnimationFrame有什么区别？
也许你对这个api不熟悉，不过由于react 16之后的版本React Fiber引起的关注
- 组建树转换为链表，可分段渲染
- 渲染时可以暂停，去执行其他髙优任务，空闲时再继续渲染
- 如何判断空闲？ —requestIdleCallback
区别：
- requestAnimationFrame每次渲染完都会执行，髙优
- requestIdleCallback空闲时才会执行，低优
<p>requestAnimationFrame</p>
<button id="btn1">change</button>
<div id="box"></div>
<script>
const box = document.getElementById('box');
document.getElementById('btn1').addEventListener('click',()=>{
let curWidth = 100;
let maxWidth = 400;
function addWidth(){
curWidth = curWidth + 3;
box.style.width = `${curWidth}px`;
if(curWidth<maxWidth){
window.requestIdleCallback(addWidth);//空闲时才会执行
window.requestAnimationFrame(addWidth);//时间不用自己控制
}
}
addWidth();
})
</script>
他们是宏任务还是微任务？
- 两者都是宏任务
- 要待DOM渲染完才执行，肯定是宏任务
代码演示：
setTimeout(() => {
console.info('timeout')
})
window.requestIdleCallback(() => {
console.info('requestIdleCallback')
})
window.requestAnimationFrame(() => {
console.info('requestAnimationFrame')
})
运行结果如下：
无论requestAnimationFrame先写还是后写，都会先执行requestAnimationFrame,因为它是髙优。
第三模块（学习心得）：
更加系统的学习了这两个api的区别，在以后的面试题中能够更加游刃有余。