requestAnimationFrame

requestAnimationFrame 是一个用于优化浏览器动画效果的 API。它可以让浏览器在下一次重绘前执行指定的回调函数，从而可以更加流畅地执行动画效果，避免了使用 setTimeout 或 setInterval 可能引起的性能问题。

requestAnimationFrame 的用法非常简单，只需要在回调函数中编写动画效果的代码，然后通过 requestAnimationFrame 函数来调用该回调函数即可。例如：

function animate() {
  // 执行动画效果的代码
  requestAnimationFrame(animate);
}

animate();

在上面的代码中，我们定义了一个名为 animate 的函数，该函数用来执行动画效果的代码。然后我们通过 requestAnimationFrame 函数来调用该函数，以便在下一次重绘前执行动画效果。最后，我们调用 animate 函数来启动动画。

需要注意的是，requestAnimationFrame 函数的调用时机是由浏览器决定的，它会在下一次重绘前执行回调函数。因此，我们不需要手动计算动画效果所需的时间间隔，也不需要担心动画效果会阻塞浏览器的 UI 渲染。同时，使用 requestAnimationFrame 还可以降低电量消耗，提高电池续航能力。

requestAnimationFrame 是宏任务。

在 JavaScript 中，任务分为宏任务和微任务两种类型。宏任务通常包括整体代码 script、setTimeout、setInterval、setImmediate（Node.js 环境）、I/O、UI rendering 等；微任务包括 Promise、process.nextTick（Node.js 环境）和 MutationObserver。

requestAnimationFrame 的回调函数会在浏览器下一次重绘之前执行，而浏览器重绘是一个 UI rendering 的宏任务。因此，requestAnimationFrame 的回调函数属于宏任务。

需要注意的是，requestAnimationFrame 的回调函数相对于 setTimeout/setInterval 等宏任务来说，具有更高的优先级。这是因为requestAnimationFrame 的回调函数会在浏览器下一次重绘之前执行，而浏览器的重绘频率通常是每秒 60 次左右，每秒60帧，大致是16ms执行一次，因此requestAnimationFrame 的回调函数会比 setTimeout/setInterval 等宏任务更快地得到执行。