渲染步骤中就提到了GPU合成composite
概念。
浏览器渲染的图层一般包含两大类:渲染图层(普通图层)
以及复合图层
渲染图层:是页面普通的文档流。无论添加多少元素,还在在同一个默认复合层。
虽然绝对定位(absolute),相对定位(fixed),浮动定位(float)会让元素成为脱离文档流,但它仍然属于默认复合层
,共用同一个绘图上下文对象(GraphicsContext)。
复合图层,又称图形层。它会单独分配系统资源,每个复合图层都有一个独立的GraphicsContext。(当然也会脱离普通文档流,这样一来,不管这个复合图层中怎么变化,也不会影响
默认复合层
里的回流Reflow重绘Repaint)
通过硬件加速
就可以使渲染图层提升为复合图层。(使用硬件加速时,尽可能地使用index,防止浏览器默认给后续的元素创建复合层渲染。a是复合层,b在a上面,b也会被浏览器隐式转为复合层)
在GPU中,各个复合图层单独绘制,故互不影响。动画借助复合层,只渲染自己所在的复合层,而不影响其他复合层。从而提升性能。