要實現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動畫并不難，關鍵是細節到位，別讓小問題積累成大瓶頸。
