浏览器layer知识

原文：https://www.alibabacloud.com/...

RenderObject(LayoutObject)会分成PaintLayer，在某些情况下PaintLayer会升级成CompositorLayer(GraphicLayer)，开发工具的layers都是CompositorLayer。

• 一. 什么情况下会LayoutObject会生成PaintLayer包裹？

  (1)生成普通PaintLayer（SelfPaintingLayers）的原因：

   1.document
   2.非static的position属性
   3.opacity小于1
   4.有css filter属性
   5.有css mask属性
   6.css mix-blend-mod属性
   7.有css transform属性
   8.backface-visibility为hidden
   9.有css reflection属性
   10.有css column-count属性或者column-width属性
   11.动画改变 opacity, transform, filter, and backdrop-filter.

  (2) OverflowClipPaintLayer：overflow非visible
  (3) NoPaintLayer：没有需要paint的LayoutObject

  其他LayoutObject与最近的祖先节点分享PaintLayer

• 二. 什么情况下PaintLayer升级成CompositingLayer？
  (1)本身节点原因

   1.拥有硬件加速属性节点的iframe，如果一个iframe没有CompositingLayer，则该iframe会与父document分享CompositingLayer
   2.Video节点
   3.Video内的控制条
   4.3D或者硬件加速2D的canvas节点，getContext(‘2d’)是不会升级的
   5.硬件加速的插件，如flash
   6.在高DPI的设备里，fixed节点会自动升级为CompositingLayer，由于PaintLayer升级会改变font的渲染模式（测试在pc chrome fixed元素也会升级）
   7.3d transform
   8.backface-visibility为hidden
   9.动画或者缓动改变 opacity, transform, filter, and backdrop-filter，当动画停止的时候则恢复PaintLayer.
   10.will-change设置为 opacity, transform, top, left, bottom, or right. 
   11.position为fixed或者sticky
  

  (2)重叠原因

   1.一个CompositingLayer被覆盖，则该覆盖者自动升级（squashing，该覆盖者升级的CompositingLayer是被覆盖的CompositingLayer衍生出来的，两者同级）
   2.一个CompositingLayer被有filter属性的filter部分覆盖（测试没有发现有升级）
   3.被transformed元素覆盖(squashing)
   4.被overflow:scroll or auto节点覆盖
   5.兄弟节点有动画或者缓动改变opacity, transform, filter, and backdrop-filter.
  

  (3)Layer Squashing 层级压缩

   如果有多个PaintLayer与一个CompositingLayer重叠，这这些PaintLayer公用一个CompositingLayer
   但是，有些情况不会公用
   1使用了mask属性，子节点覆盖与父节点同级的CompositingLayer A，此时该子节点squashingWouldBreakPaintOrder的squashingDisallowed，不能被A衍生一个CompositingLayer公用，而是自己独立一个CompositingLayer。
   就是覆盖者存在CompositingLayer的祖先节点，而被覆盖者在该祖先节点之外，则会独立一个CompositingLayer
   2升级为CompositingLayer的iframe不会与任何节点压缩一起squashingLayoutPartIsDisallowed
   3有reflection的PaintLayer不会与任何节点压缩在一起，会独立升级squashingReflectionDisallowed
   4当覆盖者和CompositingLayer不是同一个剪贴容器，比如CompositingLayer被一个overflow:hidden节点包裹
   5当覆盖者和CompositingLayer存在一个不同祖先节点，而这个祖先节点有opacity小于1
   6当覆盖者和CompositingLayer存在一个不同祖先节点，而这个祖先节点有filter
   7当覆盖者正在缓动或者正在动画，结束后恢复squash
  

  CompositingLayer拥有自己独立的GraphicsLayer，其他PaintLayers与最近的祖先CompositingLayer分享GraphicsLayer。
  每一个GraphicsLayer有一个GraphicsContext，该上下文会输出一个位图。
  只有SelfPaintingLayers才能升级为CompositingLayer