复合层与渲染管线

复合层是浏览器渲染优化的核心机制，理解其工作原理有助于编写高性能动画。

浏览器渲染管线

完整渲染流程

┌─────────────────────────────────────────────┐
│                 主线程                      │
│  JavaScript → Style → Layout → Paint       │
└──────────────────────┬──────────────────────┘
                       │ Commit
                       ▼
┌─────────────────────────────────────────────┐
│               合成线程                      │
│  图层管理 → 光栅化 → 合成 → 显示           │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│               GPU进程                       │
│  纹理上传 → GPU合成 → 屏幕输出             │
└─────────────────────────────────────────────┘

各阶段详解

图层类型

渲染图层

最基本的绘制单元，每个DOM节点对应一个渲染图层。

DOM Tree
    ↓
Render Layer Tree（渲染图层树）

图层类型分类

合成图层触发条件

/* 3D变换 */
.compositing-layer {
  transform: translateZ(0);
  transform: translate3d(0, 0, 0);
}

/* will-change */
.compositing-layer {
  will-change: transform;
  will-change: opacity;
}

/* opacity/transform动画 */
.compositing-layer {
  animation: fade 1s;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* video/canvas/iframe */
video, canvas, iframe {
  /* 默认独立合成层 */
}

/* position: fixed（部分情况） */
.fixed {
  position: fixed;
}

/* CSS滤镜 */
.filtered {
  filter: blur(5px);
}

/* backface-visibility */
.backface {
  backface-visibility: hidden;
}

合成线程工作原理

图层树管理

合成线程维护：
├── 根图层（页面背景）
├── 普通图层组
│   ├── 文本图层
│   ├── 图片图层
│   └── 其他元素图层
└── 合成图层组（独立GPU纹理）
    ├── 动画元素图层
    ├── video图层
    └── canvas图层

光栅化

将图层内容转换为GPU纹理。

图层绘制指令
    ↓
光栅化（Rasterization）
    ↓
GPU纹理数据

光栅化方式：

• CPU光栅化：主线程生成位图
• GPU光栅化：合成线程直接GPU处理

合成操作

/* GPU支持的合成操作 */
- translate：纹理位置移动
- scale：纹理缩放
- rotate：纹理旋转
- opacity：纹理透明度混合

层级与合成

层叠上下文与合成层

/* 层叠上下文可能隐式创建合成层 */
.stacking-context {
  position: relative;
  z-index: 0;
}

/* 当父元素有合成属性时 */
.parent {
  transform: translateZ(0);
}

.child {
  z-index: 1;
  /* 可能隐式提升为合成层 */
}

避免隐式合成

/* 方法1：减少z-index嵌套 */
.parent {
  transform: translateZ(0);
}

.child {
  /* 不设置z-index */
}

/* 方法2：隔离合成层 */
.isolated {
  will-change: transform;
  isolation: isolate;  /* 创建独立层叠上下文 */
}

层爆炸问题

什么是层爆炸

过多元素被提升为合成层，导致GPU内存耗尽。

/* 危险场景 */
.list {
  transform: translateZ(0);
}

.list-item {
  z-index: 1;  /* 每个item可能隐式提升 */
}

/* 100个item = 100+个合成层 */

检测方法

Chrome DevTools → Layers面板：

查看信息：
- 图层总数
- 每层尺寸和内存
- 提升原因

解决方案

/* 方法1：限制合成层范围 */
.list {
  /* 不设置transform */
}

.list-item:hover {
  transform: translateZ(0);  /* 仅悬停时提升 */
}

/* 方法2：使用contain */
.list-item {
  contain: layout style;  /* 限制影响范围 */
}

渲染管线优化

减少主线程工作

/* 跳过Layout */
.skip-layout {
  /* 使用transform/opacity */
}

/* 跳过Paint */
.skip-paint {
  /* 合成层 + transform/opacity */
}

/* 完整跳过主线程 */
.only-composite {
  will-change: transform;
  transform: translateZ(0);
  /* 动画只触发合成线程 */
}

光栅化优化

/* 小尺寸元素优先合成 */
.small-element {
  will-change: transform;
}

/* 大尺寸元素慎用合成 */
.large-image {
  /* 可能占用大量GPU内存 */
  /* 不使用will-change */
}

图层调试

Chrome Layers面板

DevTools → More tools → Layers

显示内容：
- 图层树结构
- 每层内容预览
- 内存占用统计
- 合成原因标注

性能分析

DevTools → Performance

录制内容：
- Layout事件（紫色）
- Paint事件（绿色）
- Composite事件
- GPU活动

图层边框显示

Chrome地址栏：chrome://flags
搜索：Composited render layer borders
启用后：合成层显示橙色边框

合成层最佳实践

合理创建合成层

/* 复杂动画元素 */
.animated-element {
  will-change: transform;
}

/* 固定定位元素 */
.fixed-header {
  will-change: transform;
}

/* 避免简单元素 */
.simple-text {
  /* 不需要合成层 */
}

监控GPU资源

// 监控GPU内存（实验性API）
if (performance.memory) {
  console.log('JS堆内存:', performance.memory.usedJSHeapSize);
}

// 通过Layers面板监控GPU纹理内存

适时清理

/* 动画结束后移除 */
.animated {
  will-change: transform;
  animation: slide 1s forwards;
}

.animated:not(.animating) {
  will-change: auto;
}

要点总结

1. 渲染管线：JS → Style → Layout → Paint → Composite
2. 合成层有独立GPU纹理，跳过主线程绘制
3. transform/opacity + will-change触发合成层
4. 避免隐式合成和层爆炸
5. 使用Layers面板调试图层状态
6. 监控GPU内存，适时清理合成层