chrome inspector 无独立“2d/3d mode”面板，实际需用rendering工具的层边界与重绘可视化，以及edge/新版chrome的3d视图工具，分别从平面和立体视角分析合成层与堆叠上下文，辅助定位性能瓶颈。
Chrome Inspector 本身没有“2D/3D Mode”这个独立面板，但你实际想用的是 Rendering 工具中的层边界可视化 和 Edge/Chrome 的 3D 视图工具，它们分别从平面与立体视角揭示 DOM 元素的层叠关系（z-index、堆叠上下文）与合成行为（compositing layers），进而辅助判断混合性能瓶颈。
用 Rendering 工具看层边界与重绘区域
这是最常用、最直接的方式，适用于所有 Chrome 版本：
- 打开 DevTools（F12 或 Ctrl+Shift+I），按 Esc 调出 Rendering 面板
- 勾选 Show composited layer borders：所有被提升为合成层的元素会显示黄色边框，旁边标注尺寸和“layer”字样；边框内若出现蓝色栅格，代表该层被进一步分块（tiling），常见于长列表或大背景
- 同时开启 Show paint rectangles：滚动或交互时出现的绿色矩形，表示触发重绘的区域；若 fixed 元素或动画区域反复大面积闪绿，说明其所在层未被合理隔离，可能拖累主线程
- 注意：黄色边框 ≠ 性能问题，但若大量相邻 div（如卡片列表）各自带边框，且无明确动效需求，就属于“过度合成”，易推高 GPU 内存压力
用 3D 视图工具透视堆叠上下文与层结构
该功能目前仅在 Microsoft Edge 和部分新版 Chrome（需启用实验性 flag）中完整支持，用于直观理解 z-index 层级嵌套：
- 在 Edge 中打开 DevTools → 点击活动栏的 3D View 图标；或在 Chrome 中访问
chrome://flags/#enable-devtools-3d-view启用后重启 - 切换到 Composite Layers 选项卡：每个合成层以独立“卡片”形式悬浮在 3D 空间，可旋转缩放观察其相对位置、尺寸及是否重叠——层之间距离越大，越可能产生不必要的纹理上传
- 切换到 Z Index 选项卡：展示完整的堆叠上下文树（stacking context tree），每条分支对应一个
position: relative/absolute/fixed+z-index或opacity 等创建的上下文；点击节点可高亮对应 DOM 元素，快速定位 z-index 冲突或意外新建上下文的位置 - 此视图不显示显存数值，但能一眼识别“为什么某个弹窗被遮挡”或“为何 hover 动画卡顿”——根源常是深层嵌套的堆叠上下文导致浏览器频繁重建图层树
结合 Performance 面板验证合成影响
视觉化只是起点，真实性能得靠数据佐证：
- 录制一次典型交互（如滚动、展开菜单），在 Performance 面板中勾选 Memory 和 WebGL（如有 3D 内容）
- 回放时关注 Summary 标签页：筛选 Layer 类型事件，查看“Composite Layers”阶段耗时；若单帧中该阶段 > 5ms，说明合成开销已成瓶颈
- 对比开启/关闭
will-change: transform或transform: translateZ(0)前后的帧率曲线和内存增长趋势——盲目加提升声明反而增加图层数量，可能适得其反 - 若发现 GPU Process 内存持续上涨（通过 Shift+Esc 打开 Chrome 任务管理器观察），而 3D 视图中又存在数十个细碎小层，基本可判定是层碎片化引发的显存压力
关键规避建议
不是所有层都需要存在，也不是所有 z-index 都值得设置：
- 避免对非动画元素滥用
will-change；优先用transform和opacity触发硬件加速，而非强制提升 - 合并相邻的、样式一致的可合成元素（例如用伪元素替代多个空 div 实现阴影）
- 用
contain: layout paint限制渲染影响范围，减少隐式层创建 - 检查是否因
filter、mask、clip-path等 CSS 属性意外创建了新堆叠上下文——它们比z-index更隐蔽，却同样影响层合成逻辑
