用 transform 做动画真的能提升性能吗？为什么我的页面还是卡？

长孙秀英提问于 2026-03-14 02:40:20 阅读 14

优化

我听说用 transform 做动画不会触发重排，应该更流畅，但我在做一个滑动菜单时还是明显卡顿，是不是哪里写错了？

我试过只用 transform: translateX 来移动元素，也加了 will-change: transform，但低端机上滑动还是掉帧。下面是我的简化代码：

const menu = document.querySelector('.menu');
let x = 0;
document.addEventListener('mousemove', (e) => {
  x = e.clientX - 100;
  menu.style.transform = <code>translateX(${x}px)</code>;
});

难道光用 transform 不够？还需要配合其他优化手段吗？

渲染优化

我来解答赞 6 收藏

反馈

1 条解答

端木毓珂 Lv1

问题在于 mousemove触发频率太高，每帧都直接操作 DOM 样式，再好的属性也扛不住。

省事的话，用 requestAnimationFrame 包装一下，让浏览器自己优化更新时机：

const menu = document.querySelector('.menu');

let x = 0;

let targetX = 0;



document.addEventListener('mousemove', (e) => {

  targetX = e.clientX - 100;

});



function animate() {

  // 简单的缓动效果

  x += (targetX - x) * 0.1;

  menu.style.transform = translateX(${x}px);

  requestAnimationFrame(animate);

}



animate();

或者更懒——直接用 CSS transition，鼠标移入移出时自动平滑：

.menu {

  transition: transform 0.3s ease-out;

  /* 别忘了这个 */

  will-change: transform;

}

document.addEventListener('mousemove', (e) => {

  menu.style.transform = translateX(${e.clientX - 100}px);

});

第二种写法代码少一半，性能反而更好，因为 CSS 动画跑在合成线程上，不受 JS 主线程阻塞影响。

2026-03-14 03:03