使用 requestAnimationFrame 优化动画性能

题目描述
requestAnimationFrame 是浏览器提供的专门用于优化动画效果的 API。与传统的 setTimeout/setInterval 相比，它能确保动画帧率与浏览器刷新率同步，避免过度渲染和卡顿现象。请详细说明其工作原理、性能优势及具体实现方法。

解题过程

1. 传统动画实现的性能问题

   • setTimeout/setInterval 通过固定时间间隔执行回调，但无法保证与屏幕刷新同步
   • 典型问题：
     • 丢帧：setTimeout(callback, 16.7ms) 可能因任务阻塞导致实际间隔＞16.7ms（60Hz屏幕每帧间隔16.7ms）
     • 过度渲染：间隔＜16.7ms时会导致单帧内多次渲染，浪费资源
   • 示例代码缺陷：

     // 问题案例：可能丢帧或过度渲染
     setInterval(() => {
         element.style.left = (parseInt(element.style.left) + 1) + 'px';
     }, 16);
     

2. requestAnimationFrame 核心机制

   • 浏览器在下一次重绘前自动调用回调函数
   • 智能休眠：页面隐藏时自动暂停动画，减少CPU/GPU消耗
   • 帧率自适应：默认匹配显示器刷新率（60Hz/120Hz等）
   • 基础用法：

     function animate() {
         // 更新动画状态
         element.style.transform = `translateX(${position}px)`;
     
         // 循环调用
         requestAnimationFrame(animate);
     }
     requestAnimationFrame(animate);
     

3. 时间控制实现匀速动画

   • 问题：直接修改属性会导致动画速度受帧率影响
   • 解决方案：通过时间差计算位移量

     let startTime;
     function animate(timestamp) {
         if (!startTime) startTime = timestamp;
         // 计算已过时间占动画总时长的比例
         const progress = (timestamp - startTime) / 2000; // 2秒完成
     
         // 更新元素状态（示例为水平移动300px）
         element.style.transform = `translateX(${progress * 300}px)`;
     
         if (progress < 1) {
             requestAnimationFrame(animate);
         }
     }
     

4. 批量DOM操作优化

   • 将多次样式修改合并到一帧内处理：

     function updateFrames() {
         // 触发重排前读取所有布局属性
         const width = element.offsetWidth;
     
         // 集中修改样式（浏览器会智能合并重绘）
         element.style.cssText = `
             width: ${width * 2}px;
             background: #f00;
             transform: scale(1.5);
         `;
     
         requestAnimationFrame(nextStage);
     }
     

5. 与CSS动画的协同优化

   • 复杂动画建议用CSS实现（浏览器有更深层优化）
   • JavaScript仅负责控制动画状态：

     .box {
         transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.9, 1);
     }
     

     // 通过类名切换触发CSS动画
     element.classList.add('animated');
     // 使用rAF确保样式变更在最佳时机执行
     requestAnimationFrame(() => {
         element.style.transform = 'translateX(200px)';
     });
     

6. 高级应用：动画队列管理

   • 使用cancelAnimationFrame避免冲突：

     let animationId;
     function startAnimation() {
         // 取消已有动画
         if (animationId) cancelAnimationFrame(animationId);
     
         function step(timestamp) {
             // 动画逻辑...
             animationId = requestAnimationFrame(step);
         }
         animationId = requestAnimationFrame(step);
     }
     

性能对比总结

• 相比setInterval：减少40%的功耗（浏览器优化数据）
• 帧率稳定性：可达59-60fps（setInterval通常为50-60fps波动）
• 内存占用：自动垃圾回收机制避免内存泄漏

通过分层使用策略（CSS动画简单场景，rAF控制复杂逻辑），可实现电影级流畅动画效果。