手记

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

第一模块(课程信息):

课程名称: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的区别,在以后的面试题中能够更加游刃有余。

第四模块(学习截图):



1人推荐
随时随地看视频
慕课网APP