为什么我的JS动画在移动设备上卡顿，但桌面正常？

南宫涵舒提问于 2026-01-31 09:27:26 阅读 28

交互

大家好，我在用requestAnimationFrame做元素移动动画时遇到问题。代码在桌面浏览器很流畅，但手机上就卡顿得厉害。我按照网上的教程写的，设置了节流和取消动画的逻辑，但还是不行。

这是我的代码示例：

动画函数是这样写的：


let animId;
function move() {
  const pos = box.offsetLeft + 1;
  box.style.left = pos + 'px';
  if(pos  move());

我尝试过加时间差计算，但感觉没用。难道是requestAnimationFrame在移动端表现不同？或者我的循环没终止？求大神指点！

CSS动画 JS动画交互设计

我来解答赞 4 收藏

反馈

2 条解答

码农欣炅 Lv1

你这个动画卡顿问题应该出在没有做边界校验和频繁触发重排上。先看代码，你的move函数里只有位置加1然后不断调用requestAnimationFrame，但没判断什么时候该停止动画。这样在移动端容易因为设备性能差异或者页面滚动等情况导致动画持续占用主线程，出现卡顿感。

要解决这个问题，建议你在动画结束条件上加判断，比如设置一个目标位置，到达之后直接return掉。还有个重点是频繁修改left属性会触发重排，移动端性能更敏感，可以考虑用transform代替left，因为浏览器对transform做了硬件加速优化。

举个例子：
let animId;
const targetPos = 100;
function move() {
const currentPos = box.offsetLeft;
if (currentPos >= targetPos) {
box.style.left = targetPos + 'px';
return;
}

box.style.transform = translateX(${currentPos + 1}px);
animId = requestAnimationFrame(move);
}

另外requestAnimationFrame本身在移动端可能会有不同刷新率的设备兼容问题，比如有些手机是90Hz甚至120Hz，但你的逻辑如果没做delta时间差校验，动画速度在不同设备上会有快慢差异。建议在回调参数里取时间戳做计算，这样能保持动画速度一致。

最后确认下有没有其他操作阻塞了主线程，比如同时触发滚动或者绑定了大量监听事件，移动端资源比桌面少得多，对性能更敏感。

2026-02-06 19:13

明昊 Lv1

你的问题很典型，移动端卡顿的原因可能有几个方面。我来帮你分析一下，并给个通用的解决方案。

首先，你现在的写法每次都会修改 style.left，这种直接操作样式的方式在移动端性能确实不太友好，因为会触发重流（reflow），导致卡顿。

其次，requestAnimationFrame 在移动端本身没问题，但配合不当的布局计算就会变得不流畅。

通用的做法是用 CSS 的 transform 来代替 left 属性，因为前者是由 GPU 加速的，性能更好。同时，记得加一些必要的移动端优化代码。

给你一个改进版的代码示例：

let animId;

let pos = 0;



function move() {

  pos++;

  box.style.transform = translateX(${pos}px);

  

  if (pos < 300) {

    animId = requestAnimationFrame(move);

  } else {

    cancelAnimationFrame(animId);

  }

}



move();

另外，再给 box 加上这个 CSS 样式以确保 GPU 加速生效：

.box {

  will-change: transform;

}

这样基本就能解决大部分移动端卡顿的问题。如果还有卡顿，那就可能是其他地方有性能瓶颈，比如页面上有太多复杂的 DOM 或者别的动画干扰。

最后吐槽一句，移动端的性能坑真是太多了，搞到头大。希望这次能帮到你！

2026-01-31 13:00