canvas动画帧率控制应优先使用requestanimationframe（raf）配合时间戳动态节流，精准锁定目标fps；其次可用帧计数器实现整数倍降帧；需结合visibilitystate避免隐藏页资源浪费；慎用setinterval/settimeout模拟raf。

Canvas动画的帧率控制，核心在于让requestAnimationFrame（rAF）真正按需执行，而不是“能刷多快刷多快”。盲目调用setTimeout或固定间隔循环反而容易失步、掉帧或耗电。下面几种方法兼顾精度、兼容性和实用性。

用时间戳做动态节流，精准锁定目标FPS

rAF本身不保证帧率，但每次回调都带高精度时间戳。我们可据此判断是否该渲染下一帧：

• 记录上一帧渲染时间，计算已过毫秒数
• 设定目标帧间隔（如60FPS → 1000/60 ≈ 16.67ms）
• 仅当经过时间 ≥ 帧间隔时才执行绘制，并更新时间戳

这样既不阻塞主线程，又能平滑逼近目标帧率，即使页面后台运行或设备性能波动，也能自适应减速。

用计数器实现简单整数倍降帧（如30FPS、20FPS）

若只需粗略控制（如把60FPS降到30FPS），可用帧计数代替时间计算：

• 声明一个frameCount = 0和目标间隔（如2表示每2帧渲染1次）
• rAF回调中frameCount++，仅当frameCount % interval === 0时绘图
• 重置计数器或继续累加均可，逻辑轻量无时间误差累积

适合UI反馈类动画（如粒子淡入、进度条），对时序精度要求不高，代码简洁易维护。

结合visibilityState避免隐藏页浪费资源

用户切走标签页时，浏览器通常会降低rAF频率甚至暂停，但部分动画逻辑（如数据更新、音频同步）仍可能运行。主动监听页面可见性更可靠：

• 监听document.visibilityState变化
• 不可见时暂停rAF循环（保存状态、停止调用requestAnimationFrame）
• 重新可见时重置时间戳/计数器，再恢复动画

这不仅省电，还能防止切回时因积压大量未执行帧导致卡顿或跳变。

慎用setInterval/setTimeout模拟rAF

虽然setInterval(fn, 16)看似能锁60FPS，但实际问题明显：

• 定时器延迟不可控，尤其在JS繁忙时严重滞后
• 与屏幕刷新周期不同步，易引发撕裂或抖动
• 无法被浏览器优化（如节流、后台降频），功耗更高

除非兼容极老环境（IE9及以下），否则不建议用它替代rAF。真要兜底，可用performance.now() + rAF组合模拟，而非单纯依赖定时器。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！