移动端用requestAnimationFrame动画卡顿怎么办？

程序员树行提问于 2026-02-10 16:33:25 阅读 14

移动

搞不懂啊，用requestAnimationFrame写了个简单的位移动画，在手机上测试的时候滑动页面会卡顿。代码就是标准的rAF写法：


let pos = 0;
function animate() {
  pos += 0.5;
  element.style.transform = <code>translate3d(${pos}px, 0, 0)</code>;
  requestAnimationFrame(animate);
}
animate();

尝试过把transform换成transition，卡顿反而消失了。也试过在animate里加cancelAnimationFrame的条件判断，但只要开启动画就会卡。用Chrome DevTools的60FPS模拟器测试没问题，但真机测试时低端机型特别明显…

我来解答赞 6 收藏

反馈

2 条解答

Air-海宇 Lv1

这种卡顿问题在移动端确实很常见，尤其是低端机上。你用 requestAnimationFrame 写的动画逻辑本身没问题，但问题出在频繁操作 DOM 和触发重绘上。transform 虽然是高效的 CSS 属性，但如果每一帧都直接修改样式，浏览器还是得不断计算布局和绘制，这就容易导致性能瓶颈。

解决办法其实不复杂，可以用 will-change 提前告诉浏览器这个元素会动。在你的代码里，给 element 加个样式声明：

.your-element-class {

  will-change: transform;

}

如果你不想改 CSS 文件，也可以直接在 JavaScript 里动态加：

element.style.willChange = 'transform';

这样可以显著减少重绘的压力。另外，建议把动画的逻辑放到一个更高效的地方执行，比如利用 position: fixed 或者 absolute 的容器来隔离动画元素，避免页面滚动时的干扰。

还有一个小技巧，用 setTimeout 包一下 requestAnimationFrame，让主线程喘口气：

function animate() {

  setTimeout(() => {

    pos += 0.5;

    element.style.transform = translate3d(${pos}px, 0, 0);

    requestAnimationFrame(animate);

  }, 0);

}

animate();

最后提醒一句，别忘了在页面不可见的时候暂停动画，监听 visibilitychange 事件就行：

document.addEventListener('visibilitychange', () => {

  if (document.hidden) {

    cancelAnimationFrame(yourAnimationId);

  } else {

    animate();

  }

});

这些方法组合起来基本能搞定大部分卡顿问题了。要是还不行，那就是真机性能太差，建议考虑降级方案或者直接用 CSS 动画代替。毕竟 rAF 再高效也架不住硬件拉胯啊。

2026-02-18 04:00

南宫玉涵 Lv1

移动端用 requestAnimationFrame 出现卡顿，核心问题通常是主线程被持续占用导致页面滚动和其他交互掉帧。你这段代码虽然写法标准，但在低端安卓机上会出问题，主要是因为 rAF 回调执行太频繁，加上 DOM 操作累积压力。

常见的解决方案有几个关键点：

第一，确保动画属性不会触发重排或重绘，你已经用了 transform，这点没问题，但要注意不要在 animate 函数里读写布局相关的属性（比如 offsetTop、scrollLeft 等），否则会强制同步重排。

第二，rAF 是每帧都执行，但如果设备卡顿或者页面在后台，可能累积回调造成抖动。建议加一个时间控制，避免过度渲染：

let pos = 0;

let lastTime = 0;



function animate(currentTime) {

  // 控制帧率，比如限制为30fps

  if (currentTime - lastTime < 33) return;



  lastTime = currentTime;

  pos += 0.5;

  element.style.transform = translate3d(${pos}px, 0, 0);

  requestAnimationFrame(animate);

}



requestAnimationFrame(animate);

这样可以减轻 CPU 负担，尤其对性能弱的手机有效。

第三，为什么 transition 不卡？因为它交给了合成线程处理，浏览器能更好地优化。而你的 rAF 动画一直在 JS 主线程计算 + 提交样式变更，容易和滚动事件抢资源。

还有一个隐藏坑：如果这个动画元素不在视口内，你也应该暂停它。可以用 IntersectionObserver 监听元素是否可见，不可见时 cancelAnimationFrame，避免无效渲染。

最后别信 DevTools 的 60fps 模拟，那只是 CPU 节流，GPU 和内存压力模拟不出来，真机测试才是真相。

总结：加时间节流、避免不必要的 DOM 查询、结合 visibility 控制动画启停，再不行就老老实实用 CSS transition 或 @keyframes 做位移动画，性能反而更稳。

2026-02-10 17:04