前端Wiki/词条/will-change 性能优化

will-change 性能优化

定义提前告知浏览器元素「即将变化」，让浏览器预分配合成层，减少卡顿

它是一个「性能提示」而非开关：浏览器收到 will-change: transform 后会提前为该元素创建独立的 GPU 合成层，之后动画时不再临时建层（临时建层是掉帧的主要来源）。只在确定要动的时候设置，动画结束应移除。

滥用反而有害：给无关元素都加上，会导致每一层都常驻显存，内存暴涨、合成变慢。正确姿势是 hover/focus 时通过类名加上，离开时移除；或者只给确实会做 Transform/Opacity 动画的元素。

提前声明即将变化的属性（transform/opacity 为主），让浏览器预建层
动画结束及时移除，避免常驻合成层浪费显存
是优化提示不是变身卡，给静态元素加了也没效果

HTML

<style>
  .card { transition: transform .3s; }
  .card:hover { will-change: transform; transform: scale(1.06); }
  .card:not(:hover) { will-change: auto; }  /* 离开即回收 */
</style>
<div class="card" style="width:150px;height:90px;background:#4a9eff;border-radius:10px"></div>

⚠ 常见误区

给满屏元素都加 will-change，内存和合成开销反而暴涨
期望它对 layout/render 都有加速——只有 Transform/Opacity 有效
一直挂着不移除，失去「按需建层」的本意

🔗 相关词条重绘与回流性能优化Core Web Vitals