层提升由浏览器自动触发，非手动开关；常用css属性包括transform: translatez(0)、will-change: transform、opacity: 0.99和filter；但仅层提升不能强制调用独显，须配合windows图形设置或nvidia控制面板绑定高性能gpu，并通过chrome://gpu及任务管理器gpu性能页验证是否生效。
“层提升”不是手动开关，而是浏览器根据 CSS 属性和渲染策略自动触发的优化行为。它本身不能“强制”分配独显，但合理触发层提升，再配合系统级 GPU 绑定，才能让关键转场动画真正跑在独立显卡上。
哪些 CSS 属性会触发层提升
浏览器将满足条件的元素提升为独立合成层（compositing layer），使其绕过主文档流的重排重绘，交由 GPU 单独合成。常用且稳定触发的属性包括：
- transform: translateZ(0) 或 translate3d(0,0,0) —— 最常用、兼容性最好，不改变布局也不触发重排
- will-change: transform —— 显式告知浏览器该元素即将变化，提前准备合成层（注意：不要滥用，仅对明确有高频转场的元素设置）
- opacity: 0.99（非1）—— 部分旧版本 Chromium 中有效，现代浏览器中不如 transform 可靠
- filter: blur(0.1px) 或其他非空 filter —— 会创建新层，但开销略高，慎用于频繁动画
为什么只加 will-change 或 translateZ 不够
层提升只是让元素进入 GPU 合成流程，但最终用哪块 GPU（核显 or 独显）不由 CSS 决定。即使元素已提升为独立层，Windows 仍可能默认调度到 Intel 核显上运行。此时动画依然卡顿，GPU 占用低，任务管理器里显示的是“GPU 0”（通常是核显）。
所以必须叠加操作系统级绑定：
- 在 Windows 设置 → 显示 → 图形 中，把浏览器（chrome.exe / msedge.exe / 360se.exe）设为“高性能”
- 或在 NVIDIA 控制面板 → 管理3D设置 → 程序设置 中，单独为浏览器指定“高性能 NVIDIA 处理器”
验证是否真正生效的两个关键点
别只看动画顺不顺——要确认 GPU 资源确实被正确调用：
- 打开 chrome://gpu（或 edge://gpu），搜索 “Graphics Feature Status”，确认 “Canvas OOP Rasterization”、“Rasterization”、“Video Decode” 等项状态为 Hardware accelerated，且右侧设备名含 NVIDIA 或显卡型号字样
- 打开任务管理器 → 性能 → GPU，运行动画时观察 “GPU 1”（或更高编号）的 3D 引擎占用率是否明显上升；若只有 GPU 0（通常对应核显）在动，说明系统级绑定没生效
避免常见陷阱
层提升是把双刃剑，滥用反而降低性能：
- 不要给整个页面或大量元素加
will-change: transform，这会导致内存暴涨、纹理上传延迟 - 避免同时提升太多层——Chrome 对合成层数有限制，过多会触发回退到 CPU 渲染
- 动画结束后，如需长期静止，可移除
transform: translateZ(0)（用 class 切换控制），减少不必要的图层驻留
