应使用 requestAnimationFrame 替代 setTimeout/setInterval 实现动画，因其自动对齐屏幕刷新率、页面不可见时暂停、支持时间戳精准计算；CSS 动画宜用 class 切换与 animation-play-state 控制，配合 animationstart/end 事件监听，避免强制同步布局，仅操作 transform/opacity 以保障性能。
用 requestAnimationFrame 替代 setTimeout 控制动画节奏
直接用 setTimeout 做动画帧调度，容易掉帧、卡顿，且无法与浏览器刷新节奏对齐。浏览器原生的 requestAnimationFrame 会自动匹配屏幕刷新率（通常是 60fps），并能在页面不可见时暂停调用，省电又稳定。
- 不要写
setInterval(() => { update(); render(); }, 16)—— 时间间隔不准，还可能累积延迟 - 正确写法是递归调用：
requestAnimationFrame(animateLoop)，在每次回调里更新状态、重绘，再主动请求下一帧 - 注意：
requestAnimationFrame的回调参数是当前时间戳（DOMHighResTimeStamp），可用来做精准的时间差计算，避免因帧率波动导致的速度不均
function animateLoop(timestamp) {
const delta = timestamp - lastTime;
lastTime = timestamp;
// 更新位置、旋转等状态（基于 delta 做时间驱动）
x += speed * delta / 16; // 归一化到 60fps 基准
// 渲染
element.style.transform = translateX(${x}px);
requestAnimationFrame(animateLoop);
}
let lastTime = performance.now();
requestAnimationFrame(animateLoop);
用 CSS Animation + JavaScript 协同控制启停与状态
纯 CSS 动画性能好、硬件加速强，但默认缺乏运行时干预能力。JS 不该“重写” CSS 动画，而应通过 class 切换、animation-play-state 和事件监听来接管控制权。
- 给元素设
animation-play-state: paused，初始暂停；JS 用element.style.animationPlayState = 'running'启动 - 监听
animationstart/animationend事件，比轮询getComputedStyle更可靠 - 避免直接用 JS 修改
style.animation字符串（易覆盖 duration/timing-function），优先操作className或单独的style.animationPlayState
.slide-in {
animation: slideIn 0.3s ease-out;
}
.slide-in.paused {
animation-play-state: paused;
}
// JS 控制
element.classList.add('paused');
element.addEventListener('animationend', () => {
console.log('动画结束了');
});
处理动画中断与状态同步问题
用户快速连续触发动画（比如连点按钮）、页面切后台再切回、或动画中途被 JS 强制修改样式，都可能导致状态错乱：视觉已停，但 JS 认为还在动；或计时器没清，造成内存泄漏。
- 每次启动新动画前，必须清除旧的
requestAnimationFrameID（用cancelAnimationFrame(id)） - 对 CSS 动画，监听
visibilitychange事件，在document.hidden === true时暂停动画，恢复时重新校准状态 - 不要依赖
setTimeout模拟“动画完成”，改用animationend事件或Promise封装（注意：重复触发时需 reject 旧 Promise）
性能敏感场景下慎用 getBoundingClientRect 和强制同步布局
在 requestAnimationFrame 回调里频繁读取 offsetTop、getBoundingClientRect 或 computedStyle，会触发浏览器强制同步布局（Layout Thrashing），严重拖慢帧率。
立即学习“Java免费学习笔记（深入）”；
- 把读取操作集中到一帧的开头（“read phase”），把写入操作（如
style.transform）放在结尾（“write phase”） - 对需要持续跟踪的位置，改用
IntersectionObserver或ResizeObserver异步获取，不阻塞渲染 - 动画中只用
transform和opacity属性——它们能走合成层，不触发 Layout/Paint
真正难的不是让东西动起来，而是动得稳、停得准、切得顺，且不悄悄吃掉用户设备的电量和内存。
