瀏覽器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