HTML5的requestAnimationFrame有什么优势？如何使用？
在Web开发中，实现流畅的动画效果一直是前端工程师追求的目标。过去，我们通常使用setTimeout或setInterval来制作JavaScript动画，但HTML5引入的requestAnimationFrame（简称rAF）彻底改变了这一局面。它不仅提供了更流畅的动画体验，还在性能优化上做出了巨大贡献。本文将详细探讨requestAnimationFrame的优势及其使用方法。
一、 requestAnimationFrame 的优势
相比于传统的setTimeout和setInterval，requestAnimationFrame具有以下显著优势：
1. 与屏幕刷新率同步，避免丢帧
大多数显示器的刷新率是60Hz（即每秒刷新60次），也就是说，流畅动画的最佳时间间隔大约是16.7ms。使用setTimeout时，由于事件循环和宏任务队列的机制，其实际执行时间往往大于设定的时间，容易导致动画卡顿和丢帧。而requestAnimationFrame由浏览器内部机制决定调用频率，严格遵循系统的刷新率，从而保证动画的每一帧都能被精准渲染。
2. 自动暂停，节能与性能优化
当页面处于不可见状态（如用户切换到其他标签页或最小化浏览器）时，requestAnimationFrame会自动暂停执行，不再消耗CPU和GPU资源。而setTimeout在后台依然会持续运行，不仅浪费计算资源，还可能导致页面卡顿甚至崩溃。当页面重新可见时，requestAnimationFrame会自动恢复执行。
3. 浏览器底层优化
浏览器能够将所有的requestAnimationFrame回调集中在一次重绘和回流中执行，避免了多次DOM操作引起的性能开销。同时，对于复杂的CSS动画或WebGL场景，浏览器能更好地优化渲染路径。
4. 更精确的时间控制requestAnimationFrame会将一个高精度的时间戳（DOMHighResTimeStamp）作为参数传递给回调函数，开发者可以据此计算动画的进度，确保动画速度不受帧率波动的影响，实现时间驱动的动画而非帧驱动。
二、 requestAnimationFrame 如何使用
requestAnimationFrame的使用非常简单，它接收一个回调函数作为参数，并返回一个整数ID，用于标识该定时器。
1. 基础语法
window.requestAnimationFrame(callback);
2. 简单动画示例
下面是一个将元素向右移动的简单动画示例：
<style>
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 50px;
}
</style>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var pos = 0;
function moveBox() {
pos += 2;
box.style.left = pos + 'px';
// 当移动距离小于300px时，继续请求下一帧
if (pos < 300) {
requestAnimationFrame(moveBox);
}
}
// 启动动画
requestAnimationFrame(moveBox);
</script>3. 基于时间戳的精准动画
为了防止在不同刷新率的设备上动画速度不一致，推荐使用回调函数提供的时间戳参数来计算动画进度：
var start = null;
var element = document.getElementById('myAnimation');
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
// 在1秒内（1000ms）向右移动200px
element.style.transform = 'translateX(' + Math.min(progress / 5, 200) + 'px)';
if (progress < 1000) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);4. 取消动画
与clearTimeout类似，如果需要在动画完成前取消它，可以使用cancelAnimationFrame，并传入requestAnimationFrame返回的ID：
var animId = requestAnimationFrame(step); // 在需要停止动画的地方调用 cancelAnimationFrame(animId);
三、 兼容性与降级方案
requestAnimationFrame目前已被所有现代浏览器广泛支持。如果需要兼容极老的浏览器，可以使用以下降级方案，用setTimeout作为兜底：
window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 1000 / 60);
};
window.cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.msCancelAnimationFrame ||
function(timeoutId) {
window.clearTimeout(timeoutId);
};四、 总结
requestAnimationFrame是HTML5赋予前端开发者的强大工具。它以同步屏幕刷新率的方式，彻底解决了传统定时器动画的卡顿、丢帧和资源浪费问题。在开发任何现代Web动画（包括Canvas绘图、DOM操作、WebGL等）时，都应将requestAnimationFrame作为首选方案。
如果您想查看完整的动画演示效果，可以访问我们的在线示例：www.ipipp.com
requestAnimationFrameJavaScript动画性能优化屏幕刷新率cancelAnimationFrame