will-change 不能写在 HTML 标签属性中，必须通过 style 或 CSS 规则设置；仅对 transform/opacity 生效，且需 JS 动态控制生命周期，配合 DevTools Layers 面板验证图层创建。
直接说结论：will-change 不能写在 HTML 编辑器的标签里，任何类似 will-change="transform" 的写法都完全无效——浏览器当它不存在，既不报错也不优化。
为什么 HTML 标签里加 will-change 没用
will-change 是纯 CSS 渲染提示属性，只在浏览器构建渲染树、决定图层划分时起作用。HTML 解析器根本不识别它，所有自定义属性（如 will-change_html、data-will-change）都是无效占位符。
- ❌
<div will-change="transform"></div>→ 自定义属性，无任何效果 - ✅
<div style="will-change: transform"></div>→ 有效，但必须配合真实动画 - ✅
.editor-item { will-change: transform; }→ 合法，但长期驻留图层风险极高
在编辑器中该对哪些元素动态加 will-change
编辑器里真正需要优化的，不是所有可拖拽/缩放的节点，而是那些**已知将触发高频合成动画**的临时状态元素：比如正在被拖动的块、正在过渡的模态浮层、正在切换的富文本工具栏面板。
- 只对
transform和opacity设置，其他如left、top、width浏览器直接忽略 - 避免给整个编辑器容器或所有
.block元素批量加 —— 100 个块 = 100 个 GPU 图层，内存飙升、滚动卡顿 - 移动端尤其敏感：Chrome DevTools Layers 面板顶部显示
Compositing layers: X，超 20 层就该排查
怎么加才安全：JS 控制生命周期是唯一靠谱方式
编辑器交互复杂，will-change 必须按需申请、用完即还。静态写死在 CSS 里等于主动制造内存泄漏。
立即学习“前端免费学习笔记（深入）”；
- 拖拽开始时（
dragstart或mousedown）设：el.style.willChange = 'transform' - 动画结束时（监听
transitionend或animationend）立刻清空：el.style.willChange = 'auto'（注意不是空字符串） - 禁用
scroll事件中反复 set/remove —— 节流不及时容易堆积未清理状态 - 推荐嵌套两层
requestAnimationFrame清理，确保绘制完成后再释放图层，避免闪屏
验证是否真起效，别靠感觉
写了 will-change、用了 transform，不代表真走 GPU 合成。必须用 Chrome DevTools 实锤：
- 打开
More Tools → Layers面板，悬停目标元素，确认出现独立图层且Reason字段是layer-for-transform（不是仅will-change） - 勾选
Rendering → Layer borders，看到橙色边框才代表图层创建成功 - 同时开启
Paint flashing，动画启动时若仍有大面积绿色闪烁，说明仍在重绘，will-change没救回来
最容易被忽略的一点：will-change 不解决底层动画路径问题。如果编辑器里还在用 left/top 做定位动画，或者父容器有 overflow: hidden 或 contain: strict，再怎么加提示也升不了层。
