17、requestAnimationFrame 和requestIdleCallback 的执行时机

浏览器执行情况：
宏任务 –> 微任务 –> requestAnimationFrame –> 渲染 –> requestIdleCallback –> 下一个宏任务 –> ……

requestAnimationFrame：在下一次浏览器重绘之前一定会执行，常用于动画处理

const divEle = document.getElementById('xxx')

let x = 0
const moveAnimation = () => {
  if(x > 20) return

  divEle.style.marginLeft = `${x}px`;

  window.requestAnimationFrame(moveAnimation)

  x++
}

 window.requestAnimationFrame(moveAnimation)

requestIdleCallback：浏览器空闲时去执行，常用于低优先级的长任务，但执行时机不确定哦