will-change是CSS渲染提示属性，必须通过style或CSS规则设置，仅对transform、opacity等特定值生效；写成HTML属性（如will-change="transform"）无效，因HTML解析器不识别，仅CSS渲染树构建阶段起效。
will-change 不是 HTML 属性，也不能通过 HTML 标签直接设置——任何类似 will-change_html、will-change 作为 HTML 属性的写法都无效，浏览器完全忽略。
为什么will-change必须用 CSS 或 JS 设置
它是一个纯 CSS 渲染提示，只在浏览器构建渲染树时起效，作用于「图层提升（layerization）」阶段。HTML 解析器根本不识别它，所以：
- ❌
<div will-change="transform"> —— 自定义属性，无任何效果 <li>✅ <code><div style="will-change: transform"> —— 有效，但需配合后续真实变更 <li>✅ <code>.card { will-change: transform; }—— 合法，但长期驻留风险高 -
transform：最常用、兼容性最好（Chrome 36+、Firefox 36+），且只要后续有transform变更（如translateX(10px)），大概率升层 -
opacity：必须是明显变化（如0 → 1），0.99 → 1这类微调通常不触发合成 -
scroll-position：仅对滚动容器生效，现代 Chrome/Firefox 处理保守，常被跳过，不建议单独使用 -
content-visibility：部分浏览器支持，但语义与 GPU 加速无关，慎用 - ❌
left、top、width、background-color等：加了也白加，这些属性变更仍走 CPU 重排/重绘路径 - 在动画开始前 1–2 帧设：
el.style.willChange = 'transform, opacity' - 监听
animationend或transitionend，结束后立刻设回：el.style.willChange = 'auto' - 避免在
mouseenter里加、却忘了在mouseleave移除——图层不会自动回收 - 对长列表批量操作时，宁可只对当前可视区域内的元素启用，用 IntersectionObserver 判断
- 打开
More Tools → Layers面板，手动触发动画或滚动 - 看到目标元素出现在图层列表中，且
Reason字段写着layer-for-transform或layer-for-opacity，才算成功升层 - 若
Reason是will-change，仅代表浏览器收到了提示，不代表已执行优化 - 勾选
Rendering → Paint flashing：满屏绿色闪动，基本就是will-change泛滥了
will-change只对这几个值真正生效
浏览器仅响应有限几个 CSS 属性名，其他一律被忽略或降级处理：
动态控制比静态声明安全得多
写死在 CSS 里（比如全局 .item { will-change: transform; }）等于让所有元素长期占着 GPU 图层，显存飙升、内存泄漏风险高。真实场景应配合 JS 动态开关：
立即学习“前端免费学习笔记（深入）”；
怎么验证是否真上了 GPU 图层
别靠猜，用 Chrome DevTools 实测：
最容易被忽略的一点：will-change 不是“开箱即用的加速器”，而是“高代价的预分配指令”——它本身不触发 GPU 加速，只有后续真实变更了 transform 或 opacity，才可能促成合成层并启用 GPU 合成。
