# 性能优化建议

URL: https://caijiao.org/animejs/7-tips/1-performance
Source: docs/animejs/7-tips/1-performance.md
Description: 本节介绍使用 Anime.js 动画时的性能优化技巧，包含合理使用 GPU 加速属性、避免布局抖动、减少动画数量等，并配有示例演示。

动画性能对用户体验至关重要，特别是在移动设备上。以下是一些实用的 Anime.js 性能优化技巧：

## 1. 优先使用 GPU 加速的 CSS 属性

动画中推荐使用 `transform`（如 `translateX`、`scale`、`rotate`）和 `opacity`，这类属性通常会利用 GPU 加速，减少主线程负担。

```css
/* 例：平移动画使用 transform，避免改变布局属性 */
transform: translateX(100px);
```

避免动画中直接修改 `width`、`height`、`top`、`left` 等属性，因为它们会触发布局重排，导致性能下降。

## 2. 减少同时运行的动画数量

大量动画同时运行，会增加渲染压力。可以：

- 合理使用 `stagger` 实现错峰执行
- 控制动画元素数量，必要时拆分动画流程

## 3. 合理设置动画时长和缓动函数

选择适当的动画时长和缓动函数，避免过长或突兀的动画，提升流畅度。

## 4. 避免频繁触发高成本动画

对于高频事件（如滚动、窗口大小变化），使用节流或防抖避免动画触发过频。

## 5. 清理不再使用的动画实例

动画完成后及时销毁实例，防止内存泄漏。

```js
anime.remove(target);
```

## 示例演示：使用 transform 和 opacity 动画（GPU 加速）

[在线代码演示](/animejs/demos/20.html)

### 说明

- 动画使用 `transform: translateX` 和 `opacity`，充分利用 GPU 加速；
- 使用 `will-change` CSS 属性，提示浏览器优化；
- 按钮点击触发动画，循环执行平移和透明度变化；
- 动画开始前清理前一个动画实例，防止内存泄漏。