will-change会让GPU内存暴涨，因其提前为元素创建独立合成层，每个层占用GPU纹理内存；移动端显存有限，大量图层长期驻留（尤其iOS Safari不自动回收）易致OOM崩溃。
will-change 为什么会让 GPU 内存暴涨
浏览器给元素加 will-change，本质是提前创建独立合成层（Compositing Layer），每个层都对应一块 GPU 纹理内存。移动端显存有限，一个图层常占几 MB，几十个同时挂着，内存很快见底——尤其在 iOS Safari 上，不会自动回收“闲置图层”，容易触发 OOM 崩溃。
-
will-change: transform不等于“开加速开关”，它只是向合成器发了个预约单；浏览器真建不建、建几个、建多大，取决于当前设备能力与内存余量 - 声明
will-change: all或will-change: left, top这类无效属性，浏览器可能仍会升层（但属性本身不触发合成），纯属白占资源 - 滚动容器上写死
will-change: transform，等于让整个可滚动区域长期驻留图层，哪怕用户没动手指，内存也在涨
哪些场景最容易误触发图层爆炸
不是所有“看起来在动”的地方都需要 will-change。真正危险的是那些被框架或习惯性批量处理、却缺乏生命周期管理的节点。
- Vue/React 列表项用
v-for或map渲染时，对每个.item都加will-change: transform类——动画一开，上百个图层齐飞 - 下拉刷新组件里，
.refresh-header的transform动画还没结束，用户又快速下拉第二次，transitionend监听没清除干净，新旧图层叠加不释放 - CSS 动画配合
@keyframes循环播放，但没监听animationiteration去重置will-change，导致图层越积越多
怎么确认你已经掉进图层陷阱
别靠感觉，用 Chrome DevTools 的 Layers 面板直接看真实图层数量和大小。这是唯一可信的依据。
- 打开
DevTools → More Tools → Rendering → Paint flashing和Layer borders，滑动或触发动画，观察绿色高亮是否密集、图层框是否嵌套过深 - 在
Layers面板里筛选出内存 >2MB 的图层，点开看归属元素——如果是一堆列表项或临时弹窗，基本就是滥用信号 - 在 Performance 面板录制滚动过程，重点看
GPU Memory曲线是否持续爬升，而非只盯 FPS
按需创建的关键执行时机
所谓“按需”，核心是把 will-change 当作一次性的运行时提示，不是样式表里的静态声明。
立即学习“前端免费学习笔记（深入）”；
- 交互触发前加：比如
touchstart或mouseenter事件中执行el.style.willChange = 'transform' - 动画结束后立刻删：监听
transitionend（注意加once: true防重复）或animationend，执行el.style.willChange = 'auto' - 避免在
scroll或resize回调里 toggle —— 这些事件每秒触发几十次，图层创建销毁频率远超合成器承受能力
