will-change是CSS属性，非HTML属性，必须通过style内联样式或CSS规则设置；仅对transform、opacity等可合成属性生效，滥用会导致图层过多、内存飙升。
will-change 不是 HTML 属性，写在 HTML 标签里完全无效。 所有类似 will-change_html、will-change="transform" 这样的写法，浏览器直接忽略，不触发任何优化，也不报错——只是白写。
will-change 必须用 CSS 方式设置
它只在 CSS 声明中生效，且仅对特定属性起提示作用：
-
style内联样式：正确写法是<div style="will-change: transform"> - CSS 规则：正确写法是
.anim-target { will-change: transform; } - 值必须是浏览器认可的可合成属性：仅
transform、opacity、scroll-position（有限支持）、content-visibility有效；left、top、width等会被静默忽略 - 写成
will-change: auto或未设置时，浏览器按默认策略处理，不强制升层
什么时候加？加了不移除会吃内存
will-change 是“软提示”，不是开关。浏览器收到后可能提前分配图层资源，但不会自动回收——尤其在静态样式表里长期挂着，等于让图层常驻。
- 适合场景：已知将发生**短期高频动画**，如 hover 放大按钮、模态框入场、轮播项切换
- 必须配套 JS 控制生命周期：
mouseenter时设element.style.willChange = 'transform'，animationend或transitionend后立刻设回'auto' - 常见错误：在
.list-item类上全局写will-change: transform→ 100 个 item 就生成 100 个图层，GPU 显存暴涨，滚动卡顿 - Chrome DevTools 的 Layers 面板里看到 Reason 是
will-change，只代表提示收到；真正生效要看是否出现layer-for-transform或Composited Layer标记
比 will-change 更稳妥的替代方案
多数情况下，硬触发合成层比依赖提示更可控、副作用更小：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateZ(0)或transform: translate3d(0, 0, 0)：立即升层，兼容性好，语义明确，适合轮播容器、弹窗遮罩等长期动效区域 - 滚动优化优先用
contain: paint或overscroll-behavior: contain，而非will-change: scroll-position（后者在 Chrome/Firefox 中越来越保守，常被降级） - 动画只用
transform和opacity，避开height、margin、background-color—— 这些本身就会触发重排/重绘，加了will-change也救不回来 - 移动端尤其注意：合成层数建议控制在 20 层以内；Layers 面板顶部显示
Compositing layers: X，超限就该查漏
真正难的不是怎么加 will-change，而是判断「这个元素是否真需要独立图层」——它不解决底层渲染逻辑问题，只在特定路径上帮浏览器省一步。滥用反而掩盖真实瓶颈，比如 layout 未优化、JS 主线程阻塞、图片未压缩等。
