will-change 触发的层提升不生效，是因为元素已因 transform 或 opacity 自动进入合成层，浏览器会合并而非重复创建；Chrome 115+ 会静默忽略已含 transform 的 will-change: transform。
will-change 触发的层提升不生效？检查是否被 transform/opacity 覆盖
浏览器对 will-change 的处理很务实：如果元素已经因 transform 或 opacity 自动进入了合成层，它就不会再为同个属性重复创建新层——哪怕你写了 will-change: transform。这时候查 DevTools 的 Layers 面板，会发现“Layer”没多出来，不是失效，是被合并了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确认目标元素当前是否已满足硬件加速条件（比如已有
transform: translateZ(0)或opacity: 0.99） - 想强制新建独立层？得选一个当前未触发合成的属性，比如
will-change: top（配合position: relative+top动画），但注意这会绕过 GPU 加速路径，反而更慢 - Chrome 115+ 开始，
will-change: transform在已含transform的元素上会被静默忽略，控制台无提示
动画一结束就立刻 remove will-change？别急着删
will-change 不是开关，是“预申请”。浏览器拿到后要分配纹理内存、建立合成器上下文，这个过程有开销；而释放也不是瞬间完成——尤其在滚动或频繁重绘场景下，过早移除会导致反复创建/销毁层，帧率抖动比不加还明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画持续时间短（removeProperty('will-change')
- 用 JS 控制时，避免在每一帧都 set/remove：
element.style.willChange = 'transform'应只在动画开始前执行一次 - React/Vue 中不要在 render 函数里动态写
style.willChange，容易触发无效重排
will-change 导致文字模糊或锯齿？和 font-smoothing 冲突了
合成层启用后，文本渲染会从主文档流切换到独立纹理，此时系统级抗锯齿策略可能降级，尤其在 macOS 上搭配 -webkit-font-smoothing: antialiased 时，模糊感更明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先改用
backface-visibility: hidden替代will-change——它也能触发层提升，且不影响文本子像素渲染 - 必须用
will-change时，在动画元素内部加transform: translateZ(0)强制开启 subpixel rendering（仅 Chrome/Firefox 有效） - 避免对
font-size 的文本容器设 <code>will-change，小字号在合成层中失真更严重
CSS 隔离渲染层的本质不是“隔离”，是“分治”
所谓“CSS 隔离渲染层”，其实是把一部分绘制任务从主线程的 Layout/Paint 流水线里切出去，交给 compositor 独立调度。它不改变 DOM 结构，也不阻止事件冒泡，更不会让子元素自动继承层上下文——will-change 只作用于声明它的那个元素本身。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父元素设了
will-change: transform，子元素仍会正常触发重排，除非子元素自己也声明 - 层提升后，
box-shadow、filter等效果若跨层计算，可能产生意外裁剪（比如 overflow: hidden 失效） - 移动端 WebView（如 WKWebView）对
will-change支持不稳定，iOS 16.4 前甚至完全忽略will-change: scroll-position
真正难的是权衡：多一层能省多少 Paint 时间，又多占多少 GPU 内存。实际项目里，宁可少写两行 will-change，也别让它在非动画节点上长期挂着。
