Web开发动画与性能优化

帧率说明

帧率（Frames Per Second, FPS）指的是每秒钟渲染的帧数。通常情况下，60FPS【每秒60帧】被认为是流畅动画的标准。这意味着每帧的渲染时间需要控制在16.67毫秒以内。帧率越高，动画越流畅；反之，帧率越低，动画就越卡顿。

动画性能问题和优化技巧

常见性能问题

【大量DOM操作】频繁的DOM操作导致重排和重绘增加浏览器的渲染负担。

【未优化的动画属性】CSS属性某些（width、height、top、left）会触发布局重排，影响性能。

【不当的JS逻辑】在动画中使用复杂的JavaScript计算逻辑，会占用大量的CPU时间，导致动画卡顿。

优化动画性能技巧

1、使用硬件加速

硬件加速是通过GPU是图形处理器（Graphics Processing Unit）来渲染某些特定的CSS属性（如transform、opacity），从而减轻CPU的渲染负担。要启用硬件加速，可以使用以下方法：

.element {transform: translateZ(0);will-change: transform, opacity;
}

通过添加transform: translateZ(0)或will-change，可以让浏览器提前优化这些属性的渲染过程。

2、优化CSS动画属性

在进行CSS动画时，尽量使用transform和opacity属性，而不是top、left、width、height等属性。后者会触发布局重排（reflow），严重影响性能。

推荐的动画属性：

.element {animation: move 2s infinite;
}@keyframes move {from { transform: translateX(0); }to { transform: translateX(100px); }
}

不推荐的动画属性：

.element {animation: move 2s infinite;
}@keyframes move {from { left: 0; }to { left: 100px; }
}

3. 减少DOM操作

尽量减少对DOM的直接操作，尤其是导致重排的操作。可以将需要改变的属性放在transform中操作，或者通过requestAnimationFrame优化JS动画的执行

4. 使用轻量级的动画库并控制动画复杂度

当动画涉及大量的JS逻辑，选择一个轻量级且高效的动画库，如GSAP、Anime.js等，这些库通常会对性能进行深度优化，可以帮助你更好地管理动画。
在复杂的动画场景中，适当减少动画的复杂度和元素数量是保持高帧率的关键。对于一些细微的动画效果，尽量简化，以确保整体流畅性。

实战案例说明

优化一个卡顿的动画

优化后的动画帧率显著提升，能够在各种设备上保持流畅。通过简化动画属性并启用硬件加速，我们成功地减少了CPU的负担，确保了动画的高效执行。

原始代码：一个简单的滑动动画，但由于使用了left属性，导致动画卡顿

<div class="box"></div><style>
.box {position: absolute;width: 100px;height: 100px;background-color: red;left: 0;animation: slide 5s infinite;
}@keyframes slide {0% { left: 0; }100% { left: 90%; }
}
</style>

优化代码：将left属性替换为transform属性，启用硬件加速，使得动画更加流畅。

<div class="box"></div><style>
.box {position: absolute;width: 100px;height: 100px;background-color: red;transform: translateX(0);animation: slide 5s infinite;will-change: transform;
}@keyframes slide {0% { transform: translateX(0); }100% { transform: translateX(90vw); }
}
</style>

此文章借鉴了下面博主的优秀文章，万分感谢

网站链接