过渡与动画的性能优化

CSS动画性能优化核心在于减少浏览器重排和重绘，利用GPU加速提升渲染效率。

渲染原理

浏览器渲染流程

JavaScript → Style → Layout → Paint → Composite

属性分类

动画优先使用 transform 和 opacity，它们跳过 Layout 和 Paint，直接在 Composite 阶段处理。

GPU加速

开启GPU加速

.gpu-accelerated {
  transform: translateZ(0);
  /* 或 */
  will-change: transform;
}

GPU加速属性

以下属性会触发GPU加速：

transform: translateX(0);
transform: translateZ(0);
transform: translate3d(0, 0, 0);
opacity: 0.99; /* 非1时触发 */
filter: blur(0); /* 非 none 时触发 */
will-change: transform;

层提升条件

元素满足以下条件时会被提升为合成层：

/* 硬件加速属性 */
transform: translate3d(0,0,0);
will-change: transform;

/* CSS属性 */
opacity < 1;
filter: blur(1px);
backface-visibility: hidden;

/* 特殊元素 */
video、canvas、iframe

will-change 属性

提前告知浏览器元素将发生变化，优化渲染。

语法

will-change: auto;
will-change: transform;
will-change: opacity;
will-change: transform, opacity;

使用示例

.card {
  transition: transform 0.3s;
}

.card:hover {
  will-change: transform;
}

/* 或在动画前预设 */
.animated-element {
  will-change: transform, opacity;
}

will-change 不要滥用，过多的合成层会消耗内存。

注意事项

/* 不推荐：全局设置 */
* {
  will-change: transform;
}

/* 推荐：动态添加 */
.element:hover {
  will-change: transform;
}

/* 推荐：动画结束后移除 */
.element.animated {
  will-change: transform;
}

.element:not(.animated) {
  will-change: auto;
}

性能优化策略

优先使用transform

/* 差：触发回流 */
.box {
  transition: left 0.3s, top 0.3s;
}
.box:hover {
  left: 100px;
  top: 50px;
}

/* 好：仅触发合成 */
.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: translate(100px, 50px);
}

使用transform替代布局属性

使用opacity替代visibility

/* 差：visibility无法过渡 */
.fade {
  transition: opacity 0.3s;
}

/* 好：opacity可平滑过渡 */
.fade {
  transition: opacity 0.3s;
  opacity: 1;
}
.fade.hidden {
  opacity: 0;
  pointer-events: none;
}

避免box-shadow动画

/* 差：每帧重绘 */
.box {
  transition: box-shadow 0.3s;
}
.box:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 好：使用opacity控制伪元素 */
.box::after {
  content: '';
  position: absolute;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
.box:hover::after {
  opacity: 1;
}

性能检测工具

Chrome DevTools

1. Performance面板：录制动画帧率
2. Layers面板：查看合成层
3. Rendering面板：开启FPS meter、Paint flashing

检查合成层

/* 查看层提升原因 */
/* DevTools → Layers → 查看层详情 */

强制层创建检测

// 查看合成层数量
document.querySelectorAll('*').length;

contain 属性

限制浏览器渲染范围，优化性能。

.container {
  contain: layout paint;
}

/* 或 */
.isolated {
  contain: strict;
}

最佳实践总结

/* 高性能动画示例 */
.optimized-animation {
  /* 使用transform和opacity */
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s, opacity 0.3s;

  /* 预设will-change */
  will-change: transform, opacity;

  /* 启用GPU加速 */
  backface-visibility: hidden;
}

.optimized-animation:hover {
  transform: translateX(100px);
  opacity: 0.8;
}

要点总结

• 优先使用 transform 和 opacity 做动画
• will-change 提前告知浏览器优化方向
• GPU加速通过 transform: translateZ(0) 或 will-change 开启
• 避免动画 width、height、margin、left、top 等布局属性
• 使用 contain 属性隔离渲染范围
• 善用DevTools检测性能瓶颈