25. • It's the root object for the page
• It has explicit CSS position properties (relative, absolute or a transform)
• It is transparent
• Has overflow, an alpha mask or reflection
• Has a CSS filter
• Corresponds to <canvas> element that has a 3D (WebGL) context or an accelerated 2D
context
• Corresponds to a <video> element
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
다음 특성을 가지면 새로운 RenderLayer가 만들어집니다
26. 1.자바스크립트를 읽고, 해석하고
2.CSS를 읽고 CSSOM을 생성하고
3.읽어온 DOM의 적합한 위치에 배치한후
4.특성에 맞게 그려 이미지를 만들고
5.GPU에 넘긴다
렌더링 절차
31. GraphicsLayer
하드웨어 가속 처리를 위한 물리적인 레이어
레이어별 RenderObject를
GraphicsLayer 단위로 렌더링한 뒤
최종적으로 GPU를 통해 합성된다.
32. • Layer has 3D or perspective transform CSS properties
• Layer is used by <video> element using accelerated video decoding
• Layer is used by a <canvas> element with a 3D context or accelerated 2D context
• Layer is used for a composited plugin
• Layer uses a CSS animation for its opacity or uses an animated webkit transform
• Layer uses accelerated CSS filters
• Layer has a descendant that is a compositing layer
• Layer has a sibling with a lower z-index which has a compositing layer (in other words the
layer overlaps a composited layer and should be rendered on top of it)
다음 특성을 가지면 GraphicsLayer로 승격됩니다
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
52. Reflow/Repaint와 레이어 비용을 비교해서 선택
일반적으로 많은 Reflow/paint작업을 가지는 애니메이션은 레이어 활용
너무 큰 레이어, 중복레이어는 최대한 안생기도록
(특히 리스트같이 반복되는 경우 엄청난 성능 하락이 있을 수 있음)
너무 많은 레이어도 X
암묵적 컴포징을 피하자
Blink는 Squashing 이라고 부르는 방식으로 레이어를 병합하기도 함