will-change 是预分配 gpu 图层的指令，非提速开关；仅对 transform、opacity 等可合成属性有效，须 js 动态控制生命周期，避免静态滥用导致显存飙升与卡顿。

will-change 不是“提前打个招呼就变快”的开关，它是让浏览器为特定变化预分配 GPU 图层的指令。用对了能减少合成阶段延迟；用错了反而吃内存、掉帧、滚动卡顿。

只对真正会变的属性设 will-change

浏览器只响应有限几个可合成属性，其他写了也白搭：

• 有效值：transform、opacity、filter、backdrop-filter（主流浏览器全支持）
• 基本无效或已弃用：left、top、width、height、background-color、color、scroll-position（iOS Safari 完全不支持）、content-visibility
• 危险写法：will-change: all、will-change: auto（无意义）、will-change="transform"（HTML 属性写法，完全被忽略）

必须动态控制，不能静态写死在 CSS 里

现代浏览器（Chrome 98+、Safari 16.4+、Edge 114+）已默认对 transform/opacity 动画自动升层。CSS 中写 .item { will-change: transform; } 不但没额外收益，还会让所有匹配元素长期占着图层：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 一屏 20 个列表项 → 20 个常驻 GPU 图层 → 显存飙升、滚动卡顿
• 移动端尤其敏感，iOS Safari 图层管理保守，易白屏或闪退
• 正确做法是 JS 控制生命周期：动画前 1–2 帧开启，结束后及时清空

安全设置 + 双 requestAnimationFrame 清除

直接设完就清，容易导致图层未稳定就销毁，引发闪屏或撕裂。推荐写法：

• 开始前：element.style.willChange = 'transform, opacity';
• 结束后（监听 animationend 或 transitionend）：
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      element.style.willChange = 'auto';
    });
  });
  第一层进下一帧，第二层确保绘制完成、图层已参与合成

验证是否真生效，别靠猜

加了不等于优化成功，必须实测确认：

• Chrome DevTools → More Tools → Layers 面板 → 手动触发动画
  ✅ 看到元素出现在列表中，Reason 是 layer-for-transform 或 layer-for-opacity
  ❌ Reason 是 will-change → 仅表示收到提示，未真正升层
• Rendering 面板勾选 «Paint flashing»
  满屏绿色闪烁 → will-change 泛滥，该减了

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！