普通图层和复合图层

渲染步骤中就提到了GPU合成composite概念。
浏览器渲染的图层一般包含两大类：渲染图层（普通图层）以及复合图层

渲染图层：是页面普通的文档流。无论添加多少元素，还在在同一个默认复合层。
虽然绝对定位（absolute），相对定位（fixed），浮动定位（float）会让元素成为脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。

复合图层，又称图形层。它会单独分配系统资源，每个复合图层都有一个独立的GraphicsContext。（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流Reflow重绘Repaint）

通过硬件加速就可以使渲染图层提升为复合图层。（使用硬件加速时，尽可能地使用index，防止浏览器默认给后续的元素创建复合层渲染。a是复合层，b在a上面，b也会被浏览器隐式转为复合层）

在GPU中，各个复合图层单独绘制，故互不影响。动画借助复合层，只渲染自己所在的复合层，而不影响其他复合层。从而提升性能。