合成层优化
以下是关于 合成层（Composite Layer）优化 的系统梳理，涵盖基础原理、触发条件、优化策略及进阶实践，帮助深入理解如何通过分层渲染提升页面性能：
一、合成层基础概念
1. 什么是合成层？
- 定义：浏览器将页面元素提升为独立的图形层（Graphics Layer），由 GPU 单独处理，避免频繁重绘整个页面。
- 核心作用：通过分层机制，实现局部更新和高效合成，减少渲染性能消耗。
2. 合成层的优势
- GPU 加速：利用 GPU 并行计算能力处理复杂动画（如
transform、opacity）。 - 避免重绘：图层独立绘制，修改时只需重新合成，无需触发布局（Layout）和绘制（Paint）。
- 滚动优化：滚动时仅合成可见区域的图层，提升流畅度。
二、合成层的触发条件
浏览器会根据特定规则自动创建合成层，以下是常见触发条件：
1. CSS 属性触发
- 3D 变换：
transform: translate3d(),rotate3d(),perspective。 - 动画属性：
opacity变化（结合动画）、transform动画。 - 特定样式：
will-change: transform/opacity（主动提示浏览器优化）。 - 滤镜和混合模式：
filter: blur(),mix-blend-mode（某些浏览器会分层）。
2. 元素类型触发
- 视频/Canvas/WebGL：默认提升为合成层。
- 覆盖层元素&#