requestAnimationFrame 和 requestIdleCallback 有什么区别？

一帧（60Hz 屏幕约 16.7ms），简化来看：
处理输入事件、执行任务 → rAF 回调 → 样式计算 → 布局 → 绘制 → 还有剩余时间才执行 rIC 回调

// 让方块在 1 秒内向右移动 300px
const box = document.querySelector('.box')
const duration = 1000
let startTime = null

function step(timestamp) {
  if (startTime === null) startTime = timestamp
  // 按经过的时间算进度，不按帧数算：60Hz 和 120Hz 屏幕上动画时长一致
  const progress = Math.min((timestamp - startTime) / duration, 1)
  box.style.transform = `translateX(${progress * 300}px)`
  if (progress < 1) requestAnimationFrame(step) // 回调只执行一次，要继续就再次调用
}

requestAnimationFrame(step)

const tasks = [] // 待执行的低优先级任务
let scheduled = false

// 不支持时降级到 setTimeout，每次只执行一个任务
const requestIdle = 'requestIdleCallback' in window
  ? (cb, options) => requestIdleCallback(cb, options)
  : (cb) => setTimeout(() => cb({ didTimeout: false, timeRemaining: () => 0 }), 1)

function addTask(task) {
  tasks.push(task)
  if (!scheduled) {
    scheduled = true
    requestIdle(runTasks, { timeout: 2000 })
  }
}

function runTasks(deadline) {
  // 至少执行一个：因超时被强制调用时 timeRemaining() 为 0，也要保证任务有进展
  do {
    tasks.shift()()
  } while (tasks.length > 0 && deadline.timeRemaining() > 0)

  if (tasks.length > 0) {
    requestIdle(runTasks, { timeout: 2000 }) // 没做完，等下次空闲
  } else {
    scheduled = false
  }
}