requestAnimationFrame 详解

在使用 HTML5 Canvas 进行绘图时，性能优化是一个重要的考虑因素。特别是在复杂的动画或高频率更新的情况下，重绘整个画布可能会导致性能问题。本文将详细介绍如何通过使用 requestAnimationFrame 方法与浏览器的刷新率同步，来避免不必要的重绘，从而优化 Canvas 的绘图性能。

浏览器的刷新机制

现代浏览器通常以固定的刷新率（例如 60Hz）更新屏幕，这意味着每秒钟会刷新 60 次，每次刷新间隔约为 16.67 毫秒。在每次刷新时，浏览器会重新绘制页面的内容。

requestAnimationFrame 的工作机制

requestAnimationFrame 是一个专门用于动画的 API，它会在浏览器即将进行下一次重绘时调用指定的回调函数。其工作流程如下：

1. 注册回调：当你调用 requestAnimationFrame 时，你会注册一个回调函数。
2. 等待重绘：浏览器会在下一次重绘之前调用这个回调函数。
3. 执行回调：回调函数执行后，浏览器会将绘制的内容显示在屏幕上。

避免不必要的重绘

使用 requestAnimationFrame 可以避免不必要的重绘，原因如下：

1. 同步刷新率：requestAnimationFrame 保证回调函数在浏览器的刷新周期内执行，这样可以确保每次绘制操作都能在下一次屏幕刷新时显示出来，避免了多余的绘制操作。
2. 节省资源：如果使用 setInterval 或 setTimeout，可能会导致绘制操作与浏览器的刷新周期不同步，导致某些绘制操作在屏幕刷新之前被覆盖或重复执行，浪费了计算资源。
3. 平滑动画：requestAnimationFrame 提供了一个平滑的动画效果，因为它确保每一帧的绘制都能在正确的时间点进行，避免了卡顿或跳帧现象。

示例对比

使用 setInterval

function draw() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制图形
    // ...
}

// 每 16 毫秒调用一次
setInterval(draw, 16);

使用 setInterval 时，绘制操作可能与浏览器的刷新周期不同步，导致不必要的重绘。

使用 requestAnimationFrame

function draw() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制图形
    // ...

    // 请求下一帧
    requestAnimationFrame(draw);
}

// 启动动画循环
requestAnimationFrame(draw);

使用 requestAnimationFrame 时，绘制操作与浏览器的刷新周期同步，避免了不必要的重绘，提供了更平滑的动画效果。

总结

通过与浏览器的刷新率同步，requestAnimationFrame 可以确保每次绘制操作都在正确的时间点进行，避免了多余的绘制操作，从而提高了性能和动画的平滑度。

在进行 Canvas 绘图时，使用 requestAnimationFrame 是一个简单而有效的优化方法。它不仅能提高绘图性能，还能提供更好的用户体验。如果你正在开发一个需要频繁更新的动画或复杂的绘图应用，不妨尝试使用 requestAnimationFrame 来优化你的代码。