will-change 应在动画触发前1–2帧动态添加、结束后立即设为auto；不可滥用或预设，避免与transform: translatez(0)叠加；父级overflow: hidden、filter等会压制合成层；轻量替代方案是transform: translate3d(0,0,0)。
will-change 什么时候该加、什么时候不该加
加 will-change 不是为了“让动画变快”，而是告诉浏览器：“接下来几帧内，这个元素大概率会变——请提前准备合成层”。它不触发重排，但会提前占用 GPU 显存。滥用会导致内存暴涨，尤其在列表项或滚动区域里批量加 will-change: transform，页面可能直接卡死或崩溃。
常见错误现象：will-change: transform 写在 CSS 全局规则里（比如 .card { will-change: transform; }），结果所有卡片常驻合成层；或者在 hover 动画中写死不移除，导致鼠标移走后图层仍不释放。
- ✅ 只在动画触发前 1–2 帧动态添加：用 JS 在
mouseenter或scroll回调里设element.style.willChange = 'transform' - ✅ 动画结束后立刻设回
element.style.willChange = 'auto'（别留空字符串） - ❌ 不要对未明确动画意图的元素预设（比如刚进页面就给所有
.item加） - ❌ 不要和
transform: translateZ(0)叠加使用——后者是过时提层手段，现代浏览器已不依赖它
为什么加了 will-change 还没进合成层
加了 will-change: transform 却没看到独立图层？大概率是父容器“压制”了合成层创建。Chrome DevTools 的 Layers 面板里看不到该元素的独立图层，说明提升失败。
典型压制条件包括：overflow: hidden、filter（哪怕只是 filter: blur(0.1px)）、mask、clip-path、非 identity 的 transform（如父级写了 transform: scale(0.95)）。这些属性会让浏览器把子元素强制合并在父图层里绘制，GPU 加速失效。
- ✅ 把高频动画元素提级到无修饰的容器中，例如从
.list > .item改为<div class="animated-wrapper"><div class="item"></div></div> - ✅ 检查父级是否含
filter或overflow: hidden；如有，改用clip: rect()或透明边框模拟裁剪 - ✅ 用
chrome://gpu确认硬件加速已启用，否则合成层会退化为 CPU 渲染
替代 will-change 的轻量提层方案
如果你不想处理 will-change 的生命周期管理，可以用更可控的 CSS 提层方式——前提是动画只涉及 transform 和 opacity。
最稳妥的是 transform: translate3d(0, 0, 0)，兼容性比 translateZ(0) 更好，且不会像 will-change 那样长期驻留图层。但它不是“开关”，而是一个“信号”：只要该声明存在，浏览器就会尝试提升；一旦移除，图层通常随之销毁。
- ✅ 适合固定动画场景（比如模态框入场）：
.modal { transform: translate3d(0, 0, 0); animation: slideIn 0.3s; } - ✅ 配合
backface-visibility: hidden可进一步稳定提层，尤其在 3D 变换中防止闪烁 - ❌ 不要和
will-change同时用；也不要在动画关键帧里动态切换translate3d值来“控制提层”——这反而引发图层重建开销 - ⚠️ 注意：移动端显存紧张，单页合成层数建议控制在 5–8 层以内，超出后帧率下降明显
检查重绘区域是否真被缩小了
加了提层手段后，不能只看 Layers 面板有没有图层，更要验证“重绘范围是否收敛”。Chrome 的 Paint Flashing 功能（Rendering 面板 → 勾选 Paint flashing）会高亮每帧重绘区域。理想状态是：只有动画元素自身闪红，周围内容完全不动。
常见反模式：一个 opacity 动画元素被包裹在 overflow: hidden 的父容器里，结果整个父容器都在闪——说明重绘没隔离，提层失败。
- ✅ 用
contain: paint强制隔离绘制边界（支持 Chrome 52+、Firefox 69+），比will-change更轻量、更确定 - ✅ 对纯位移动画，优先用
transform: translateY()而非top，哪怕只差 1px，也决定是合成层更新还是全布局重算 - ⚠️ 最容易被忽略的一点：动画元素若含文字，且字体加载未完成，
font-size或line-height变化会触发布局重排——确保字体预加载或使用系统字体栈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
