will-change 仅是提示浏览器预优化，不直接启用 gpu 加速；真正触发 gpu 合成需后续变更 transform、opacity 等可合成属性，并成功升为独立图层。
will-change 本身不使用 GPU 加速，也不会触发真正的 GPU 渲染流水线——它只是向浏览器发出一个“我可能要变”的提示，让浏览器提前做些内存分配或图层提升的准备。实际是否上 GPU、是否真提速，完全取决于后续是否发生 transform 或 opacity 等可合成（composited）属性的变化，以及浏览器是否成功将其升为独立合成图层。
哪些属性变化能真正触发 GPU 合成
只有被浏览器判定为「可被合成」的 CSS 属性变更，才会让 will-change 发挥作用。常见有效组合包括：
-
transform（尤其是translate3d(0,0,0)、scale、rotateZ） -
opacity（必须是非动画起始值，比如从 0.99 → 1 不行，但 0 → 1 可以） -
filter（部分滤镜如blur(2px)在 Chromium 中可合成，但contrast()多数情况不行）
而 top/left、width/height、background-color 等布局或绘制属性，即使加了 will-change: top，浏览器也大概率忽略，或升图层后仍走 CPU 绘制路径。
为什么 will-change: transform 比 will-change: scroll-position 更可靠
scroll-position 是个特殊值，仅在滚动容器上生效，且现代 Chrome/Firefox 对它的处理越来越保守：除非明确配合 contain: paint 或滚动绑定了 passive 的 wheel 事件，否则常被降级为无操作。相比之下，will-change: transform 触发条件明确、兼容性好（Chrome 36+、Firefox 36+），且只要后续有 transform 动画或 JS 修改，就大概率促成图层提升。
实操建议：
- 避免写
will-change: scroll-position单独使用；改用will-change: transform+transform: translateZ(0)强制升层 - 若目标是滚动优化，优先考虑
contain: strict或overscroll-behavior: contain - 不要对大量元素批量设
will-change，会吃光内存（每个独立图层至少占用几 MB 显存）
Chrome DevTools 里怎么验证是否真上了 GPU 图层
打开 Chrome DevTools → More Tools → Layers 面板，滚动或触发动画，观察目标元素是否出现在图层列表中，并检查右侧的「Composited Layer」标记和「Reason」字段：
- 看到
will-change出现在 Reason 里，只代表浏览器收到了提示，不代表已生效 - 真正生效的标志是 Reason 显示
transform或opacity，且图层类型为RenderLayer或GraphicsLayer - 如果 Reason 写着
layer-for-positioned-content或layer-for-transform，说明升层成功；若仍是layer-for-background，大概率没走 GPU 合成路径
注意：Layers 面板本身会强制开启一些合成行为，关闭面板再测一次更真实。
真正卡顿的根源往往不在“要不要加 will-change”，而在是否意外触发了 layout（重排）或 paint（重绘）。加了 will-change 却还在改 left 或 fontSize，等于一边开高速路一边拖着牛车进收费站。
