JavaScript动画核心是控制元素样式随时间变化，推荐用requestAnimationFrame（rAF）；它与屏幕刷新率同步、自动暂停、避免丢帧，性能优于setTimeout/setInterval。
JavaScript 实现动画效果的核心是**控制元素的样式随时间变化**，最常用且推荐的方式是使用 requestAnimationFrame（rAF），而非 setTimeout 或 setInterval。性能考量则围绕“是否触发重排（reflow）、重绘（repaint）、合成（composite）”以及“主线程是否被阻塞”展开。
用 requestAnimationFrame 实现平滑动画
rAF 让浏览器决定最佳执行时机（通常每秒 60 次），与屏幕刷新率同步，避免丢帧。它还会在页面不可见时自动暂停，节省资源。
基础写法示例：
function animate() {
element.style.transform = `translateX(${x}px)`;
x += 2;
if (x < 400) requestAnimationFrame(animate);
}
animate();
- 优先修改
transform和opacity属性——它们能走 GPU 合成层，不触发重排重绘 - 避免在动画中读取布局属性（如
offsetTop、getBoundingClientRect()），否则会强制同步回流 - 把动画逻辑封装为可取消的函数（配合
cancelAnimationFrame）
哪些操作会严重拖慢动画性能
以下行为会让动画卡顿甚至掉帧：
立即学习“Java免费学习笔记（深入）”；
-
频繁修改非合成属性：比如直接改
top、left、width、height，每次都会触发重排 → 重绘 → 合成流水线 - 在 rAF 回调里做大量计算或 DOM 查询：挤占主线程，导致下一帧来不及渲染
-
未启用硬件加速但又需要频繁更新：可在元素上加
will-change: transform或transform: translateZ(0)提前提示浏览器提升图层（慎用，别滥用） - 过度使用 box-shadow、filter（如 blur）：这些属性即使作用于合成层，也会增加 GPU 绘制负担
现代替代方案：CSS 动画 + JS 控制
对大多数交互动画（如淡入、滑动、缩放），优先用 CSS @keyframes + element.animate() 或 class 切换，JS 只负责触发和监听事件。
-
element.animate(keyframes, options)是 Web Animations API，支持暂停、反向、时间轴控制，且性能接近纯 CSS - 用
transition配合 class 切换更轻量，适合状态变化明确的场景（如 hover、active） - JS 可监听
animationend或transitionend做后续处理，避免轮询
性能监控与优化建议
开发阶段可用 Chrome DevTools 的 **Rendering 面板**开启“FPS Meter”、“Paint Flashing”、“Layer Borders”，直观查看帧率、重绘区域和合成层分布。
- 目标是稳定 60fps：每帧预算约 16.6ms，其中 JS 执行 + 样式计算 + 布局 + 绘制 + 合成总和不能超限
- 用
performance.now()测量关键路径耗时，确认瓶颈是否在 JS 逻辑本身 - 复杂动画考虑用
Web Workers处理纯计算（如粒子位置模拟），再通过postMessage同步到主线程更新样式
