浏览器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