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）。
但高效有前提：
立即学习“Java免费学习笔记（深入）”；
- 只对
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 动画退化成操作非合成属性，那等于主动放弃性能优势。
