will-change 是 css 属性，非 html 属性，须通过 style 或 css 规则设置；仅对 transform、opacity 等特定值生效，用于提示浏览器提前创建独立图层，滥用反致性能下降。
will-change 不是 HTML 属性，也不能写成 will-change_html —— 这个写法本身是无效的，浏览器会直接忽略。
为什么 will-change 不能写在 HTML 标签里
它是一个 CSS 属性，只对 CSS 声明生效，必须通过 style 内联样式或 CSS 规则设置。HTML 中没有 will-change_html 这种属性，也不存在对应的标准或浏览器支持。
- 写成
<div will-change_html="transform">：完全无效，只是自定义属性，不触发任何渲染优化 <li>写成 <code><div style="will-change: transform">：这才是正确用法，但需谨慎 <li>写成 <code><div class="anim-target"> + <code>.anim-target { will-change: transform; }：合法，但有副作用will-change的真实作用和适用场景它只是给浏览器一个“提示”，告诉它：“接下来这个元素很可能要频繁变化
transform或opacity”，让浏览器提前为其创建独立图层（layer），避免重绘时牵连其他内容。- 只对
transform、opacity、content-visibility和scroll-position（部分浏览器）有效；其他值如left、top、width会被忽略 - 适用于已知将长期动画的元素（比如模态框入场、轮播图切换），而非所有动效都加
- 加了不等于性能变好——图层多了反而增加内存占用和合成开销
常见错误和性能反模式
很多人以为加了
will-change就能“加速动画”，结果反而卡顿。根本原因在于误用时机和范围。- 在 hover 或 click 事件里临时加
will-change，但没及时移除：图层常驻，吃内存 - 对整个列表项批量加
will-change: transform：几百个元素各占一个图层，GPU 内存飙升 - 配合
position: absolute+top/left动画使用：无效，因为top触发 layout，will-change对它不起作用 - 在 Chrome DevTools 的 Rendering 面板里勾选 “Paint flashing”，能看到绿色闪动——如果满屏绿，大概率是
will-change泛滥了
更稳妥的替代方案
大多数情况下，与其硬加
will-change，不如靠 CSS 本身触发硬件加速，且更可控：- 用
transform: translateZ(0)或transform: translate3d(0,0,0)显式提升图层（兼容性更好，语义明确） - 动画只用
transform和opacity，避开height、margin、background-color等会触发重排/重绘的属性 - 对滚动容器加
contain: paint，比全局will-change更精准 - 真要动态控制，用 JS 在动画开始前 1–2 帧设
style.willChange = 'transform'，结束后立刻设为空字符串
真正影响性能的，从来不是该不该加
will-change，而是是否理解图层生成机制、是否清楚自己动画的触发链路——加得越随意，越容易掩盖底层问题。 - 只对
