使用 will-change

will-change 提前告知浏览器哪些属性即将变化，让浏览器提前优化。

基本语法

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

工作原理

浏览器在看到 will-change 后，会：

1. 为元素创建独立的合成层
2. 提前准备 GPU 资源
3. 避免变化时的性能开销

使用场景

动画前声明

/* 元素即将做 transform 动画 */
.card {
  will-change: transform;
}
.card:hover {
  transform: scale(1.05);
}

动态添加（推荐方式）

/* 默认不设置，hover 时才启用 */
.element {
  transition: transform 0.3s;
}
.element:hover {
  will-change: transform;
}

// JS 动态添加更精确
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';  // 及时清除
});

注意事项

不要过度使用

/* 差：对所有元素设置 */
* {
  will-change: transform;
}

/* 好：仅对动画元素设置 */
.animated-card {
  will-change: transform;
}

不要提前太久设置

/* 差：页面加载就设置，浪费资源 */
.page-load {
  will-change: transform;  /* 但动画在用户点击后才发生 */
}

/* 好：交互前才设置 */
.card:hover {
  will-change: transform;
}

动画结束后移除

// 动画完成后清除
element.addEventListener('transitionend', () => {
  element.style.willChange = 'auto';
});

支持的属性值

will-change 会消耗额外内存，只在必要时使用。

要点总结

• will-change 提前告知浏览器优化目标属性
• 仅对真正需要动画的元素使用
• 在交互触发时设置，动画结束后移除
• 避免全局设置，防止内存浪费
• 优先优化 transform 和 opacity 动画