动画卡白的一些原因及解决办法

飞熊 • 2024年1月12日下午7:46 • 后端开发 • 阅读 234

大量计算或重绘导致的性能瓶颈：如果动画需要大量计算或重绘，可能会导致浏览器的性能瓶颈，从而引起卡顿。解决办法是尽可能减少计算和重绘的次数，例如使用 CSS3 动画而非 JavaScript 动画，避免使用过于复杂的动画效果等。尽管 CSS3 动画也可以触发重绘，但相对于 JavaScript 动画而言，使用 CSS3 动画可以更有效地利用现代浏览器的硬件加速功能，从而提高性能。
- GPU 加速：现代浏览器都支持 GPU 加速，当使用 CSS3 动画时，浏览器会把动画交给 GPU 处理，减轻 CPU
  的负担，从而提高性能。
- 优化算法：浏览器对 CSS3 动画进行了优化，使用了更加高效的算法，使得动画的执行效率更高。
- 无需 JavaScript：使用 CSS3 动画不需要编写 JavaScript 代码，减少了代码的复杂度，提高了开发效率。
- 减少 DOM 操作：使用 JavaScript 实现动画通常需要操作 DOM，而 DOM 操作是非常耗费性能的，使用 CSS3动画可以减少 DOM 操作，从而提高性能。
JavaScript 代码执行时间过长：如果 JavaScript 代码执行时间过长，可能会导致浏览器无法及时响应用户的操作，从而引起卡顿。解决办法是将 JavaScript 代码拆分成多个任务，使用 requestAnimationFrame 来调度任务执行，避免一次性执行过多的代码等。
图片加载过慢：如果动画中使用了大量的图片，并且这些图片加载过慢，可能会导致动画卡顿。解决办法是优化图片加载，例如使用 CSS sprites、延迟加载、图片预加载等技术。
帧率设置过高：如果动画帧率设置过高，可能会导致浏览器无法及时渲染每一帧，从而引起卡顿。解决办法是适当降低帧率，例如将帧率设置为 30fps 或者更低的值。
缺少硬件加速：如果浏览器没有开启硬件加速，可能会导致动画卡顿。解决办法是开启硬件加速，例如使用 transform、opacity、filter 等属性实现动画效果。