css的渲染层合成是什么 浏览器如何创建新的渲染层

# 一 、CSS的渲染层合成是什么

在DOM树中，每个节点都对应一个渲染对象。当它们的渲染对象处于相同坐标空间时，就会形成一个渲染层。渲染层将保证页面元素以正确的方式堆叠。这个时候就会出现层合成(composite)。从而正确处理透明元素和堆叠元素的显示。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致页面元素显示异常。

# 二 、浏览器如何创建新的渲染层

• 根元素 document
• 定位属性(fixed,absolute,relative,sticky)
• opacity<1
• 有 CSS fliter 属性
• 有 CSS transform 属性且值不为 none
• ...

具体参考： 浏览器层合成与页面渲染优化