requestIdleCallback和requestAnimationFrame的区别？

是否了解过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会优先执行，然后才会执行requestIdleCallback