will-change: transform 仅是软提示，真正触发 gpu 显存分配的是满足特定条件的图层提升：3d 变换、opacity≠1、fixed/absolute 且父容器有合成属性、或 will-change 后真实发生 transform 更新。

直接用 will-change: transform 并不能“通知 GPU 预留显存缓冲区”，它只是向浏览器渲染器发出一个软提示：这个元素接下来很可能要频繁变换。真正触发独立合成层、促使浏览器为其分配 GPU 显存缓冲区的，是满足特定条件后的图层提升行为，而非 CSS 声明本身。

明确触发合成层的核心条件

只有当元素满足以下任一条件时，浏览器才会实际创建独立合成层（即分配 GPU 显存缓冲区）：

• 应用了 3D 变换（如 transform: translateZ(0)、translate3d(0,0,0)），这是最稳定、兼容性最好的主动提升方式
• 设置了 opacity 且值不等于 1（注意：不能与 filter 或 backdrop-filter 同时使用，否则会禁用硬件加速）
• 使用了 position: fixed 或 position: absolute 且父容器有 transform、opacity 等合成属性（形成包含块）
• 设置了 will-change: transform 且该元素后续确实发生了 transform 更新（仅声明不会立即升层，需配合真实动画）

避免“假提升”导致显存浪费或降级

很多情况下元素看似被提升了，实则未真正进入 GPU 渲染管线，甚至引发更差性能：

• 父容器设了 overflow: hidden，但子元素 transform 后超出裁剪区 → 浏览器放弃合成，回退到 CPU 软件绘制
• 动画中混用 left/top（触发 Layout）和 transform（应走合成）→ 强制同步布局，打断图层复用
• 每帧内既写 transform 又读 scrollHeight、offsetTop 等布局信息 → 触发强制同步重排（Forced Synchronous Layout）
• 大量元素同时设置 will-change 或滥用 translateZ(0) → 图层过多，单个 4K×4K 图层约占 64MB 显存，易超限崩溃

真正“提前预留”的实用做法

想让 GPU 在动画开始前就准备好缓冲区，关键不是靠声明，而是在动画启动前完成图层创建并保持稳定：

• 对确定要动画的元素，在 DOM 插入后、动画开始前，先应用一次 transform: translateZ(0.1px)（微小位移避免视觉变化），再用 getComputedStyle 强制触发图层提升
• 动画结束时，若该元素后续长期静止，应主动清除提升样式（如移除 transform 或设为 none），防止图层常驻显存
• 配合 requestAnimationFrame 控制更新节奏，确保所有样式变更都在同一帧内完成，避免跨帧布局抖动
• 对 ECharts、Canvas 动画等重型容器，统一加 transform: translateZ(0); backface-visibility: hidden;，既稳定升层，又减少纹理闪烁

验证是否真的预留成功

打开 Chrome DevTools → Rendering 面板 → 勾选 “Layer Borders” 和 “FPS Meter”，观察动画期间是否有清晰的绿色边框（代表独立合成层），同时检查 FPS 是否稳定在 60。若出现大面积红色重绘区域或帧率骤降，说明图层未生效或被意外降级。