will-change: transform;

will-change 有什么用？

你可以这样答：

will-change 用来告诉浏览器某个属性即将发生变化，浏览器会提前进行优化（如创建合成层、启用 GPU 加速），从而减少动画卡顿，提高性能。但不能滥用，否则会增加内存消耗。

 

 

will-change: transform; 的核心作用只有一句话：

提前告诉浏览器：这个元素的 transform 很快要变化，让浏览器提前优化（通常创建 GPU 合成层） 🚀

但它背后的机制比较高级，我给你从 原理 → 作用 → 使用场景 → 注意事项 讲清楚。

 

一、什么是 will-change

will-change: transform;

意思是：

浏览器，这个元素 马上要改变 transform，请提前准备优化

浏览器会做这些事情：

• 创建新的合成层（Composite Layer）
• 可能启用 GPU 加速
• 提前缓存绘制内容
• 避免动画开始时卡顿

---

二、为什么需要 will-change

没有 will-change 时：

.box {
  transition: transform .3s;
}

当动画开始：

浏览器流程：

创建图层 → Paint → Composite → 动画

问题：

👉 第一次动画可能会卡顿 😬

---

使用 will-change：

.box {
  will-change: transform;
}

浏览器提前：

创建图层 → 等待动画 → 直接动画

结果：

👉 动画更流畅 🚀！！！！！！！！！！

三、什么时候使用 will-change

最适合：

① 动画元素

.card {
  will-change: transform;
}

例如：

• hover 动画
• 卡片动画
• 菜单动画

---

② 滚动动画

.header {
  will-change: transform;
}

例如：

• sticky header
• 滚动浮动元素

③ 频繁变化的元素

例如：

• 拖拽
• 手势操作
• Three.js UI overlay（你最近很可能用到）

四、will-change 可以写哪些值

transform、opacity、scroll-position

多个：will-change: transform, opacity;

五、will-change 和 translateZ(0) 区别

以前（老方法）：

作用：

• 强制 GPU 加速
• hack 技术

现在推荐：

will-change: transform;

因为：

• 更规范
• 浏览器更智能
• 性能更好

六、⚠️ 非常重要：不要滥用 will-change

错误用法：

* {
  will-change: transform;
}

结果：

❌ GPU 内存暴涨
❌ 页面更卡
❌ 浏览器崩溃

因为：

每个 will-change 都可能创建：👉 一个新的 GPU 图层

八、哪些属性适合 will-change

推荐：

• transform
• opacity

不推荐：

• width
• height
• margin
• left
• top

因为这些会：

👉 触发回流（没意义：会重排）

---