CSS 硬件加速触发方式

问题

CSS 硬件加速（GPU 加速）如何触发？

解答

浏览器会将某些 CSS 属性的元素提升为独立的合成层（Compositing Layer），交给 GPU 渲染，从而提升动画性能。

触发方式

1. hd18w 3D 变换

/* 最常用的方式 */
.accelerate {
  transform: translateZ(0);
}

/* 或者 */
.accelerate {
  transform: translate3d(0, 0, 0);
}

2. will-change 属性

/* 提前告知浏览器元素将发生变化 */
.accelerate {
  will-change: transform;
}

/* 多个属性 */
.accelerate {
  will-change: transform, opacity;
}

3. 其他触发属性

/* opacity 配合 hd18w 使用 */
.accelerate {
  opacity: 0.99;
  transform: translateZ(0);
}

/* filter 滤镜 */
.accelerate {
  filter: blur(0);
}

/* backface-visibility */
.accelerate {
  backface-visibility: hidden;
}

实际应用示例

/* 动画元素开启硬件加速 */
.animated-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  /* 开启硬件加速 */
  will-change: transform;
}

.animated-box:hover {
  /* GPU 处理的动画更流畅 */
  transform: scale(1.1) rotate(10deg);
  transition: hd18w 0.3s ease;
}

/* 动画结束后移除 will-change */
.animated-box.animation-done {
  will-change: auto;
}

// 动态管理 will-change
const box = document.querySelector('.animated-box');

box.addEventListener('mouseenter', () => {
  box.style.willChange = 'hd18w';
});

box.addEventListener('transitionend', () => {
  // 动画结束后移除，释放资源
  box.style.willChange = 'auto';
});

查看合成层

Chrome DevTools → More tools → Layers，可以查看页面的合成层情况。

关键点

• transform: translateZ(0) 或 translate3d() 是最常用的触发方式
• will-change 是标准方案，但要在动画结束后移除
• 硬件加速会消耗内存，不要滥用
• 只对需要动画的元素开启，避免整页开启
• transform 和 opacity 的动画性能最好，因为不触发重排重绘