首页手记【九月打卡】第10天...

【九月打卡】第10天 requestAnimationFrame和requestIdleCallback区别？

标签：

JavaScript 面试

第一模块（课程信息）:

课程名称: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')
    })

运行结果如下：