requestAnimationFrame与requestIdleCallback🈶什么区别

requestAnimationFrame与requestIdleCallback🈶什么区别？？

requestAnimationFrame是一个与重绘有关的函数,在绘制下一帧的时候调用
而requestIdleCallback是与事件循环有关的函数，当前事件循环结束前的空闲时间内执行回调用

requestIdelCallback

requestIdleCallback是在事件循环即将进入下一个循环的时候，会执行该函数中的callback

requestAnimationFrame.

是在浏览器将发生重绘的间隙被调用

const requestIdleCallbackId = requestIdleCallback(() => {
  console.log('requestIdleCallback被调用');
});

console.log('requestIdleCallbackId', requestIdleCallbackId);

function testEventLoop () {
  console.log('start'); // 押入执行栈并执行

  const promise1 = new Promise((resolve, reject) => {
    console.log('create promise.'); // 押入执行栈并执行
    resolve('resolve promise 1');
  });

  setTimeout(() => {
    // setTimeout中的所有代码压入宏务队列中
    console.log('第一个setTimeout开始执行');
    const nextEventLoopStartPromise = new Promise((resolve, reject) => {
      console.log('第一个setTimeout执行中创建promise');
      resolve('resolve第一个setTimeout中的promise');
    });
    nextEventLoopStartPromise.then((res) => {
      console.log('第一个setTimeout中的promise被执行');
    });
    console.log('第一个setTimeout结束');
    setTimeout(() => {
      console.log('第一个setTimeout中创建的setTimeout被执行');
    }, 0);
  }, 0);

  const promise2 = new Promise((resolve, reject) => {
    console.log('create promise2 in setTimeout'); // 执行
    resolve('resolve promise2 in setTimeout');
  });

  console.log('创建列2个promise和一个setTimeout后的console'); // 直接执行

  promise2.then((res) => {
    console.log('promise2的then被执行', res); // 微任务队列
  });

  setTimeout(() => {
    console.log('第二个setTimeout被调用'); // 宏任务队列
  }, 0);

  const promise3 = new Promise((resolve, reject) => {
    console.log('create promise3'); // 执行
    resolve('resolve promise3 ');
  });

  promise3.then((res) => {
    console.log('promise3的then被执行', res); // 微任务队列
  });

  promise1.then((res) => {
    console.log('promise1的then被执行', res); // 微任务队列
  });

  console.log('end'); // 执行
}

testEventLoop();

执行以上代码可以知道，requestIdleCallback的回调函数是在浏览器空闲的时候执行的，执行的时间并不确定。