rAF 与定时器对比
setInterval(fn, 16) 并不能保证 16ms 执行一次：它只是“至少间隔 16ms”，且可能丢帧、后台继续跑。rAF 则保证每次重绘前恰好一次，是“帧驱动”而非“时间驱动”。
对比实验：同样的位移动画，setInterval 在拖动窗口、切后台时容易抖动；rAF 一直平滑。老代码迁移成本很低——把 setInterval(fn, 16) 换成用 rAF 的递归调用即可。
- setInterval：时间驱动，可能累积漂移、后台空转
- rAF：重绘驱动，与刷新率同步、后台暂停
- 动画始终用“时间差”计算进度，帧率无关
HTML
<style> .lane { height: 60px; border-bottom: 2px solid #eee; position: relative; } .car { width: 40px; height: 26px; border-radius: 6px; position: absolute; top: 22px; left: 0; } #carA { background: #4a9eff; } #carB { background: #f778ba; } </style> <p style="color:#888">蓝车 setInterval，粉车 rAF —— 都能跑，但 rAF 更稳更省电</p> <div class="lane"><div class="car" id="carA"></div></div> <div class="lane"><div class="car" id="carB"></div></div> <script> var a = document.getElementById('carA'), b = document.getElementById('carB'); var ax = 0, bx = 0; // 反面：setInterval setInterval(function () { ax = (ax + 2) % 360; a.style.left = ax + 'px'; }, 16); // 正面：rAF function drive() { bx = (bx + 2) % 360; b.style.left = bx + 'px'; requestAnimationFrame(drive); } requestAnimationFrame(drive); </script>
本节要点setInterval 时间驱动会漂移，rAF 重绘驱动平滑且省电；动画统一交给 rAF。
