will-change是纯css渲染提示属性，必须通过style或css规则设置，不能写在html标签中；仅对transform、opacity等可合成属性生效，滥用会增加gpu内存开销而非提升性能。
不能在 HTML 标签里写 will-change 属性，任何类似 will-change="transform" 或 will-change_html="transform" 的写法都完全无效——浏览器当它不存在。
为什么will-change必须用 CSS 或 JS 设置
它不是 HTML 属性，而是纯 CSS 渲染提示，只在浏览器构建渲染树、决定图层划分（layerization）时起作用。HTML 解析器根本不识别它，所以：
❌ <div will-change="transform"> → 自定义属性，无任何效果<br>✅ <code><div style="will-change: transform"> → 有效，但需配合真实动画使用<br>✅ <code>.target { will-change: transform; } → 合法，但长期驻留图层风险高
will-change只对这几个值真正生效
浏览器只响应有限的、能走合成路径（compositing）的值，其他一律忽略或降级处理：
-
transform：最常用，兼容性好（Chrome 36+、Firefox 36+），动画走 GPU 纹理操作 -
opacity：仅对明显变化（如0 → 1）触发合成；0.99 → 1这类微调不生效 -
scroll-position：仅对设置了overflow: auto/scroll的容器有效，现代浏览器处理较保守 -
contents：用于内容频繁更新场景（如聊天消息流），部分浏览器支持 -
left、top、width、background-color等：加了也白加，它们触发重排/重绘，will-change对其无优化能力
动态控制比静态声明安全得多
写死在 CSS 里（比如 .item { will-change: transform; }）等于让所有匹配元素长期占着 GPU 图层，显存飙升、低端安卓易抖动。真实场景应靠 JS 精准开关：
- 在动画触发前 1–2 帧设：
el.style.willChange = 'transform, opacity' - 监听
animationend或transitionend，结束后立刻设回'auto'或空字符串 - 避免在
mouseenter加、却忘了在mouseleave移除——图层不会自动回收 - 对长列表，只对当前可视区域内的元素启用，别批量加
怎么验证它真起效了
别靠猜。打开 Chrome DevTools：
- 进
More Tools → Layers面板，手动触发动画，看目标元素是否出现在图层列表中，且Reason字段显示layer-for-transform或layer-for-opacity - 若
Reason是will-change，仅代表浏览器收到了提示，不代表已升层 - 勾选
Rendering → Paint flashing：满屏绿色闪动，基本就是will-change泛滥了 - 真正提速的前提是后续确实变更了
transform或opacity；只设will-change不动属性，毫无意义
最容易被忽略的一点：will-change 不是“开箱即用的加速器”，而是“高代价的预分配指令”。它本身不省 CPU 时间，反而增加 GPU 内存开销——只有当你已确认某处动画卡顿、且排除了 layout / paint 问题后，才值得动它。
