17370845950

JavaScript动画应优先使用requestAnimationFrame而非setTimeout，因其与屏幕刷新同步、省资源；CSS动画更高效但仅限transform和opacity；JS动画适用于依赖实时数据或复杂逻辑的场景。

JavaScript 动画靠 requestAnimationFrame，不是 setTimeout

用 setTimeout 或 setInterval 做动画会掉帧、卡顿，因为它们不和屏幕刷新同步。浏览器每秒刷新约 60 次（即 16.7ms 一帧），requestAnimationFrame 才是为此设计的 API —— 它自动对齐刷新节奏，且在标签页不可见时暂停执行，省资源。

实操建议：

• 永远用 requestAnimationFrame 替代 setTimeout 实现逐帧逻辑
• 动画逻辑里别做重计算或 DOM 查询，把 offsetTop、getBoundingClientRect() 等提前缓存
• 避免在动画帧内修改多个样式属性，尤其触发 layout 的（如 width、height、top）

CSS 动画在多数场景下确实更高效

CSS 动画（@keyframes + animation）由浏览器渲染引擎直接驱动，关键帧可被硬件加速（尤其是 transform 和 opacity），不经过 JS 主线程，也不触发重排（reflow）。

但高效有前提：

• 只对 transform 和 opacity 做动画，其他属性（如 background-color、left）仍会触发重绘甚至重排
• 避免在动画中频繁切换 display: none 或改变 DOM 结构
• 用 will-change: transform 提前提示浏览器优化（但别滥用，会增加内存开销）

什么时候必须用 JavaScript 动画？

当动画依赖运行时数据、用户交互或复杂逻辑时，CSS 动画力不从心。比如：

• 跟随鼠标位置的视差效果（需实时读取 event.clientX）
• 物理模拟（弹簧、重力、碰撞检测）—— 需要每帧计算速度/加速度
• 根据滚动进度动态插值的视差或渐变（window.scrollY 不可被 CSS 直接绑定）
• 需要精确控制暂停、反向、跳转到某一时间点（CSS 的 animation-play-state 和 animation-delay 太简陋）

此时推荐用 requestAnimationFrame + transform 更新，而非操作 top/left。

一个对比示例：移动方块

下面两个实现完成相同位移，但性能差异明显：

/* ✅ 推荐：CSS 动画（仅 transform） */
.box {
  width: 100px;
  height: 100px;
  background: #007bff;
  animation: slide 2s ease-in-out;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

/* ⚠️ 可行但低效：JS 改 top/left（触发重排） */
function badAnimate() {
  let pos = 0;
  function step() {
    el.style.left = pos + 'px'; // ❌ 触发 layout
    pos += 5;
    if (pos < 300) requestAnimationFrame(step);
  }
  step();
}

/* ✅ 可控且高效：JS + transform */
function goodAnimate() {
  let pos = 0;
  function step() {
    el.style.transform = `translateX(${pos}px)`; // ✅ 合成层，不重排
    pos += 5;
    if (pos < 300) requestAnimationFrame(step);
  }
  step();
}

CSS 动画的边界很清晰：它快，但僵硬；JS 动画慢一点，但能响应任意状态。真正容易被忽略的是——别让 JS 动画退化成操作非合成属性，那等于主动放弃性能优势。