前端动画的优化

动画渲染和屏幕刷新率的关系

大多数现代显示器的刷新率是 60Hz，也就是说每秒刷新 60 次。因此，60 FPS 刚好匹配显示器的刷新频率，这意味着每帧的时间应该控制在 16.67 毫秒（即 1000 毫秒 / 60 帧）。

动画优化

1. 使用 requestAnimationFrame：它会将动画更新与浏览器的重绘周期同步，使得每次动画更新都在浏览器渲染的正确时间点进行，从而确保动画的平滑度。
   

   let animationId = null;
   function animate() {
     // 更新动画状态
     // 更新元素的位置或样式
     animationId = requestAnimationFrame(animate); // 请求下一帧
   }
   animationId = requestAnimationFrame(animate); // 启动动画
   // 在某些条件下取消动画
   cancelAnimationFrame(animationId);

2. 尽量使用css动画而不是js动画:对于简单的状态转换，使用 CSS 的 animation 或 transition 属性来创建动画，而不是使用 JavaScript 手动操作样式。CSS 动画通常会被浏览器优化，并能够利用硬件加速
   

   .element {
     transition: opacity 0.3s ease-in-out;
   }
   .element:hover {
     opacity: 0.5;
   }

3. 硬件加速：使用 transform 和 opacity 等 CSS 属性来触发 GPU 加速的渲染，而不是修改会导致布局重排的属性。
   

   .element {
     transition: transform 0.3s ease-in-out;
   }
   .element:hover {
     transform: translateX(100px);
   }

4. 减少重绘和回流，例如可以将动画效果应用到position属性为absolute或fixed的元素上