requestAnimationFrame通过与浏览器渲染周期同步，确保动画流畅、省电且避免丢帧，而setTimeout因无法精准匹配刷新时机易导致卡顿和资源浪费。
要说前端动画的性能优化，requestAnimationFrame绝对是绕不开的关键。它通过与浏览器渲染周期的深度同步，让动画变得异常流畅，同时还省电。而setTimeout，虽然也能实现动画效果，但在渲染调度上，它更像是一个‘盲人摸象’，很难精准抓住浏览器绘画的最佳时机，往往会造成不必要的性能损耗和视觉上的卡顿。核心区别在于，requestAnimationFrame是浏览器层面的优化，它知道何时是更新动画的最佳时机，而setTimeout只是一个定时器，它只管时间到了就执行，不管浏览器是否准备好渲染。
requestAnimationFrame（简称rAF）提供了一个优化动画性能的强大机制。它的核心思想是让浏览器来决定动画帧的更新时机，而不是我们开发者自己去猜测。当你调用requestAnimationFrame时，你实际上是告诉浏览器：“嘿，下一帧渲染之前，帮我执行一下这个函数。” 浏览器会在下一次重绘之前调用你提供的回调函数，这个时机通常是显示器刷新率（比如60Hz）决定的，也就是每秒60次。
这样做的优势非常明显：
- 帧率同步： rAF会与浏览器的刷新率同步，确保动画更新与屏幕刷新完美对齐，避免了“撕裂”现象和不必要的计算，动画看起来就无比流畅。
-
性能优化： 当页面不在活动状态（比如用户切换到其他标签页），rAF会自动暂停，从而节省了CPU和GPU的资源，大大降低了电量消耗。而
setTimeout在后台标签页依然会持续运行。 - 避免丢帧： 浏览器在调用rAF回调时，会确保所有DOM操作和样式计算都可以在下一帧绘制前完成，最大程度地减少了丢帧的可能性。
一个基本的rAF动画循环大概是这样的：
let startTime = null;
const duration = 2000; // 动画持续2秒
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const progress = (currentTime - startTime) / duration;
if (progress < 1) {
// 根据progress计算动画当前状态，例如移动一个元素
const element = document.getElementById('myElement');
if (element) {
element.style.transform = `translateX(${progress * 200}px)`;
}
requestAnimationFrame(animate); // 继续下一帧
} else {
// 动画结束
const element = document.getElementById('myElement');
if (element) {
element.style.transform = `translateX(200px)`; // 确保最终状态
}
console.log('动画结束！');
}
}
requestAnimationFrame(animate);这段代码展示了一个简单的平移动画，它在每次浏览器准备好绘制新帧时更新元素的位置。这种模式下，动画的流畅性和资源利用率都达到了最佳。
requestAnimationFrame究竟是如何工作的？
我们都知道，浏览器背后有个忙碌的“管家”，也就是它的事件循环机制。而requestAnimationFrame的聪明之处，就在于它懂得如何与这个“管家”高效沟通。它不是简单地把任务丢进任务队列然后不管，而是深入到了浏览器渲染流水线的核心。
当浏览器要渲染一帧画面时，它会经历一系列步骤：首先是处理JavaScript任务（包括执行rAF的回调），然后进行样式计算（Style）、布局（Layout/Reflow）、绘制（Paint）以及最终的合成（Composite）。requestAnimationFrame的回调函数，正是在JavaScript执行阶段，也就是在浏览器进行样式计算和布局 之前 被调用的。这意味着你可以在这个回调里安全地修改DOM或样式，浏览器会把这些改动统一计算、布局、绘制，并在下一帧中呈现出来。
想象一下，浏览器就像一个电影导演，每秒钟要拍60张照片（帧）。requestAnimationFrame就像导演的助理，它会告诉你：“导演，下一张照片要拍了，你有什么要调整的吗？趁现在赶紧告诉我，我好安排下去。” 而setTimeout更像是一个独立的小闹钟，它只管时间到了就响，至于导演是不是在忙着拍其他照片，它就不知道了，结果可能就是你改了场景，但导演已经拍完照了，或者导演还没准备好，你就把场景改了，导致画面混乱。这种与渲染周期的高度同步，是rAF能提供流畅动画体验的根本原因。
为什么说requestAnimationFrame比setTimeout更适合动画？
这两种机制在动画渲染调度上的区别，远比我们想象的要深远，直接影响着用户体验和性能。
1. 渲染同步性与流畅度：
-
requestAnimationFrame： 它与浏览器的绘制周期紧密同步。这意味着你的动画更新会在浏览器准备好绘制下一帧之前精确执行。如果显示器是60Hz，那么rAF的回调大约每16.6毫秒执行一次，完美匹配帧率。这样就确保了每次动画更新都能被及时渲染到屏幕上，避免了视觉上的卡顿和“撕裂”现象。 -
setTimeout： 它的执行时机是基于你设定的延迟时间。比如你设置setTimeout(func, 16)，它会尝试在16毫秒后执行回调。但这个“16毫秒”只是一个最小延迟，实际执行时间可能会更长，而且它并不关心浏览器是否正在忙于其他任务，或者是否已经完成了当前帧的绘制。如果浏览器在处理其他耗时任务，或者你的回调执行得太快或太慢，都可能导致动画更新与屏幕刷新不同步，出现丢帧（jank），让动画看起来不连贯、不流畅。
2. 性能与资源消耗：
-
requestAnimationFrame： 浏览器可以对rAF进行智能优化。当你的页面处于非活动状态（比如最小化、切换到其他标签页），浏览器会暂停rAF的回调执行，大大节省了CPU和GPU资源，延长了设备的电池寿命。这对于移动设备尤其重要。 -
setTimeout： 无论页面是否可见，setTimeout都会按照设定的时间间隔持续执行。这意味着即使你的动画在后台运行，它依然会消耗宝贵的计算资源，造成不必要的电量浪费和性能负担。
3. 浏览器优化与调度：
-
requestAnimationFrame： 浏览器内部的渲染引擎会统一调度所有rAF回调。这意味着即使有多个动画同时运行，浏览器也会尝试在同一帧内处理它们，减少了多次重绘和回流的开销。 -
setTimeout： 每个setTimeout都是一个独立的任务，它们可能会在不同的时间点触发DOM操作，导致浏览器在同一帧内进行多次不必要的样式计算、布局和绘制，这会显著增加渲染成本。
简单来说，requestAnimationFrame是浏览器为动画量身定制的“VIP通道”，它确保了动画以最高效率和最佳视觉效果呈现。而setTimeout则是一个通用的“普通通道”，它虽然能送达信息，但无法保证效率和时机，在动画场景下，其缺点暴露无遗。
在实际项目中，如何有效地使用requestAnimationFrame？
在实际项目中，requestAnimationFrame不仅仅是替换setTimeout那么简单，它需要我们对动画的状态管理和交互逻辑有更深的思考。
1. 精确控制动画状态：
一个健壮的rAF动画，需要一个清晰的状态管理机制。你不能只知道动画在运行，还得知道它运行到哪个阶段了，是开始、进行中，还是结束。通常我们会用一个时间戳（performance.now()或者rAF回调函数自带的currentTime参数）来计算动画的“进度”（progress），然后根据这个进度来插值（lerp）动画的属性。
let start = null;
let element = document.getElementById('myElement');
const duration = 1500; // 动画持续时间
const startPosition = 0;
const endPosition = 300;
function animateMove(currentTime) {
if (!start) start = currentTime;
const elapsed = currentTime - start;
const progress = Math.min(elapsed / duration, 1); // 确保进度不超过1
// 使用缓动函数，让动画更自然
const easedProgress = 0.5 - Math.cos(progress * Math.PI) / 2; // 缓入缓出
element.style.transform = `translateX(${startPosition + (endPosition - startPosition) * easedProgress}px)`;
if (progress < 1) {
requestAnimationFrame(animateMove);
} else {
// 动画结束后的清理或回调
console.log('动画已完成！');
}
}
// 启动动画
// requestAnimationFrame(animateMove);这里我们引入了easedProgress，这就是一个简单的缓动函数，让动画在开始和结束时更平滑，而不是生硬的线性运动。
2. 动画的暂停与恢复：
因为rAF是循环调用的，所以我们需要一个机制来暂停和取消它。cancelAnimationFrame就是为此而生。
let animationFrameId; // 保存requestAnimationFrame的ID
function startAnimation() {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId); // 先取消之前的动画，避免重复
}
start = null; // 重置开始时间
animationFrameId = requestAnimationFrame(animateMove);
}
function pauseAnimation() {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null; // 清除ID
console.log('动画已暂停');
}
}
// 假设有按钮触发这些函数
// document.getElementById('startButton').addEventListener('click', startAnimation);
// document.getElementById('pauseButton').addEventListener('click', pauseAnimation);通过保存requestAnimationFrame返回的ID，我们可以在需要时精确地停止动画。
3. 处理复杂的动画序列和组合： 对于需要多个动画按顺序或并行执行的场景，我们可以将每个动画封装成独立的函数或类，然后通过事件或Promise链来协调它们。例如，一个动画结束后触发另一个动画。
function animateScale(currentTime) { /* ... */ } // 另一个动画函数
function runSequence() {
// 第一个动画
let scaleStart = null;
const scaleDuration = 1000;
function scaleAnimation(currentTime) {
if (!scaleStart) scaleStart = currentTime;
const progress = Math.min((currentTime - scaleStart) / scaleDuration, 1);
element.style.transform = `scale(${1 + progress * 0.5})`; // 放大到1.5倍
if (progress < 1) {
requestAnimationFrame(scaleAnimation);
} else {
// 第一个动画结束后，启动第二个动画
start = null; // 重置平移动画的开始时间
requestAnimationFrame(animateMove);
}
}
requestAnimationFrame(scaleAnimation);
}
// runSequence(); // 启动动画序列这种链式调用或者通过状态机管理复杂动画，能让代码更清晰，逻辑更可控。
4. 性能监控： 在开发过程中，利用浏览器开发者工具（如Chrome DevTools的Performance面板）来录制动画过程，可以清晰地看到每一帧的渲染耗时、JavaScript执行时间、布局和绘制时间。这能帮助你识别性能瓶颈，确保rAF的优势得到充分发挥，而不是被其他耗时操作抵消。
总的来说，requestAnimationFrame提供了一个与浏览器渲染机制深度融合的动画解决方案。它的高效、省电和流畅性是setTimeout无法比拟的。但在实际应用中，我们还需要结合良好的状态管理、合理的缓动函数以及必要的性能监控，才能真正发挥它的全部潜力，为用户带来极致的视觉体验。
