使用requestAnimationFrame配合transform和opacity，避免重排重绘，可显著提升移动端JavaScript动画流畅度。
在移动端实现流畅的 JavaScript 动画，关键在于减少主线程负担、避免重排与重绘，并合理利用浏览器的渲染机制。直接操作 DOM 实现动画容易造成卡顿，尤其在性能较弱的设备上。要提升用户体验，需从原理和实践两方面优化。
使用 requestAnimationFrame 控制帧率
相比 setInterval 或 setTimeout，requestAnimationFrame（rAF） 能够让动画与屏幕刷新率同步（通常为 60fps），避免不必要的计算，提升流畅度。
它会在浏览器下一次重绘前执行回调，确保动画更新发生在合适的时机。
- 动画逻辑写在 rAF 回调中，系统自动调度执行时机
- 页面不可见时，rAF 会自动暂停，节省电量与性能
- 配合时间戳参数，可实现匀速或缓动动画
let start = null;
function animate(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const x = Math.min(progress / 10, 100); // 移动100px用时1s
element.style.transform = `translateX(${x}px)`;
if (x < 100) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
优先使用 transform 和 opacity
CSS 的 transform 和 opacity 属性由合成器（compositor）处理，不触发布局（layout）和绘制（paint），仅涉及合成层，性能更高。
立即学习“Java免费学习笔记（深入）”；
尽量避免使用 left/top 修改位置，这类属性会引发重排；同样 margin、width、height 也会导致重排或重绘。
- 用 translateX/Y/Z 替代 left/top
- 用 scale 替代 width/height 缩放
- 动画过程中保持元素在独立的合成层（可借助 will-change 或 transform: translateZ(0)）
避免频繁读写 DOM 样式
JavaScript 中读取 offsetTop、clientWidth 等属性会强制浏览器同步计算布局，若在循环中反复读写样式，极易引发“布局抖动”（Layout Thrashing）。
优化策略是批量处理：先读取所有需要的值，再统一写入。
- 将读操作集中放在写操作之前
- 缓存 DOM 查询结果，避免重复访问
- 使用 getBoundingClientRect() 一次性获取位置信息
考虑使用 CSS 动画或 Web Animations API
对于简单交互动画，CSS 动画由浏览器原生支持，运行在独立线程，更高效。可通过 JavaScript 控制类名切换来驱动。
复杂场景可尝试 Web Animations API，它结合了 JS 控制力与浏览器优化能力，语法简洁且性能良好。
- CSS 动画适合固定行为，如 hover、显示隐藏
- Web Animations API 支持暂停、反向、动态调整，适合交互式动画
- 注意兼容性，部分旧浏览器需 polyfill
基本上就这些。核心是减少主线程压力，利用好浏览器的渲染流程。只要避开重排重绘、用对 API，移动端 JavaScript 动画也能很流畅。
