브라우저의 렌더링 과정을 간략히 하면 아래와 같다.
스타일 계산 ➡️ layout(reflow) ➡️ 레이어트리 갱신 ➡️ paint(repaint) ➡️ composite
이 과정 중 마지막인 Composite 과정에 대해 알아보고자 한다.
레이어들의 합성(composite)하여 한장의 bitmap으로 만드는 과정. 간단히 말하면 여러 레이어를 하나의 레이어로 만드는 과정이다.
CSS 파싱 과정에서 Composite Layer를 생성하는 요소들이 있다.
<vedio>
혹은 <canvas>
태그 사용Composite Layer 생성은 CPU와 GPU가 통신하는 단계입니다. transform
과 같은 속성을 사용하면 CPU대신 GPU를 사용하게 됩니다. 또한 Composite thread를 이용하여 메인 쓰레드의 영향을 거의 받지 않고 애니메이션을 효과적으로 나타낼 수 있습니다.
또한, Composite Layer로 레이어가 분리 되어있다면 reflow가 필요한 레이어와 reflow없이 repaint만 필요한 레이어를 분리하여 불필요한 계산을 제거하여 성능을 개선할 수 있습니다. (캐싱하는 효과)
참조