要实现h5页面60fps流畅动画，关键在于优化渲染、控制复杂度和合理使用api。一、减少重绘重排，优先使用transform和opacity属性，并通过will-change或translatez(0)启用硬件加速；二、用requestanimationframe代替settimeout/setinterval，保持与屏幕刷新同步，复杂计算移至web worker；三、控制并发动画数量，建议不超过3~5个，动效复杂时降级处理，结合懒加载和intersection observer优化触发时机；四、使用chrome devtools的performance面板测试调试，检查帧率波动和长任务，在真机特别是低端设备上验证表现，及时优化不必要的dom操作和样式变化。
在H5页面制作中，想要实现60FPS的流畅动画，关键在于控制资源、优化渲染流程，并减少主线程的负担。很多人做出来的动画卡顿，不是因为复杂度高，而是细节没处理好。
一、减少重绘重排，用css硬件加速
动画中最容易拖慢帧率的操作就是频繁触发重排（reflow）和重绘（repaint）。比如使用top、left来移动元素，就会不断计算布局，影响性能。
建议优先使用transform和opacity来做动画，这两个属性由GPU处理，不会引起重排。例如：
transition: transform 0.3s ease; transform: translateX(100px);
另外，给动画元素加上will-change或开启translateZ(0)也能触发硬件加速，但别滥用，否则会占用过多显存。
二、合理使用requestAnimationFrame
JavaScript 控制动画时，千万别用 setTimeout 或 setInterval，它们不与浏览器刷新节奏同步，容易掉帧。
应该使用 requestAnimationFrame（简称 rAF），它会在下一帧绘制前执行回调，保证动画与屏幕刷新同步。示例：
function animate() { // 更新动画状态 requestAnimationFrame(animate); } animate();
如果你在rAF里还做了大量计算，建议把复杂运算拆到Web Worker中，避免阻塞主线程。
三、控制动画复杂度和并发数量
一个页面上同时运行太多动画，即使每个都很轻量，也可能导致帧率下降。尤其是SVG动画、粒子特效等视觉效果密集型内容。
优化方法包括：
- 控制同一时间活跃的动画数量，不超过3~5个为宜
- 动画复杂时降级，比如移动端关闭部分非核心动效
- 使用懒加载机制，在进入可视区域后再开始播放
此外，尽量避免在滚动事件中直接驱动动画，可以结合节流函数（throttle）或Intersection Observer来优化响应频率。
四、测试与调试不能少
再好的代码也需要实测验证。chrome devtools 的 Performance 面板可以清晰看到帧率波动、长任务等问题。
几个常用技巧：
- 录制一段动画操作，看是否稳定在16ms/帧左右
- 检查是否有强制同步布局或长任务阻塞
- 在真机上测试，特别是低端设备，动画表现差异很大
如果发现FPS不稳，先从动画结构入手，看看有没有不必要的DOM操作或样式频繁变化的地方。
基本上就这些，实现60FPS的H5动画并不难，关键是细节到位，别让小问题积累成大瓶颈。
