will-change不是html属性，写在html标签中完全无效；它必须通过css（如style或样式规则）设置，且仅对transform、opacity等可合成属性生效，需js动态控制生命周期并用devtools layers面板验证图层是否真正提升。
will-change 不能“预加载”硬件加速，它只是个提示信号，且必须配合真实动画才可能起效；在 HTML 编辑器中硬塞 will-change="transform" 到标签里，完全无效。
为什么 will-change 写在 HTML 标签里没用
浏览器解析 HTML 时，所有非标准属性（比如 will-change、will-change_html）都被当作文档自定义属性处理，压根不进 CSS 渲染管线。它不是 HTML 属性，而是纯 CSS 渲染提示，只在构建渲染树、决定图层划分时起作用。
- ❌
<div will-change="transform"></div>→ 解析为自定义属性，无任何效果 - ✅
<div style="will-change: transform"></div>→ 进入样式计算，但需后续真有transform变化才可能升层 - ✅
.editor-dragging { will-change: transform; }→ 合法，但长期驻留图层，极易引发内存问题
编辑器里哪些元素值得加 will-change
不是所有动效都该加，只对已知将触发高频合成动画的**临时状态元素**动态启用：
- 正在拖拽的块（
dragstart触发时设，dragend或transitionend清空） - 模态浮层入场/退场（仅在
animationstart前 1–2 帧设，animationend立即设为auto） - 工具栏面板切换（避免对整个
.toolbar容器加，只加实际位移的子面板） - 绝对不要给
.editor根容器、.block列表项批量加 —— 每个都占一个 GPU 图层，移动端极易卡顿
怎么加才安全：JS 动态控制生命周期
静态写死在 CSS 里等于主动制造内存泄漏。必须按需申请、用完即还：
- 动画开始前 1–2 帧设：
el.style.willChange = 'transform, opacity' - 动画结束监听优先用
animationend（比transitionend更可靠，尤其动画被中断时） - 清理必须嵌套两层
requestAnimationFrame：requestAnimationFrame(() => { requestAnimationFrame(() => { el.style.willChange = 'auto'; }); });确保绘制完成后再释放图层，避免闪屏 - 禁用在
scroll或mousemove中反复 set/remove —— 节流不及时容易堆积未清理状态
验证是否真起效，别靠感觉
写了 will-change、用了 transform，不代表真走 GPU 合成。必须用 Chrome DevTools 实锤：
- 打开 More Tools → Layers 面板，悬停目标元素，确认 Reason 字段是
layer-for-transform（不是will-change） - 勾选 Rendering → Layer borders，看到橙色边框才代表图层创建成功
- 同时开启 Paint flashing，若动画启动时仍有大面积绿色闪动，说明
will-change泛滥或混用了left/top等低效属性
真正影响性能的，从来不是该不该加 will-change，而是是否理解图层生成机制、是否清楚自己动画的触发链路 —— 加得越随意，越容易掩盖底层问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
