브라우저의 렌더링 과정을 간략히 하면 아래와 같다. 스타일 계산 ➡️ layout(reflow) ➡️ 레이어트리 갱신 ➡️ paint(repaint) ➡️ composite 이 과정 중 마지막인 Composite 과정에 대해 알아보고자 한다.

정의

레이어들의 합성(composite)하여 한장의 bitmap으로 만드는 과정. 간단히 말하면 여러 레이어를 하나의 레이어로 만드는 과정이다.

Layer가 생성되는 조건

CSS 파싱 과정에서 Composite Layer를 생성하는 요소들이 있다.

• <vedio> 혹은 <canvas> 태그 사용
• 3D, 2D transforms, opacity 적용(opacity는 1보다 작아야)
• animation 이나 transition 사용
• iFrame일 경우
• backface-visibility 가 hidden일 경우

이를 이용한 성능 개선

Composite Layer 생성은 CPU와 GPU가 통신하는 단계입니다. transform과 같은 속성을 사용하면 CPU대신 GPU를 사용하게 됩니다. 또한 Composite thread를 이용하여 메인 쓰레드의 영향을 거의 받지 않고 애니메이션을 효과적으로 나타낼 수 있습니다.

또한, Composite Layer로 레이어가 분리 되어있다면 reflow가 필요한 레이어와 reflow없이 repaint만 필요한 레이어를 분리하여 불필요한 계산을 제거하여 성능을 개선할 수 있습니다. (캐싱하는 효과)

참조

• Composite Layer(feat. css, js 애니메이션)
• 웹 성능 최적화에 필요한 브라우저의 모든 것
• CSS 애니메이션의 성능 아는 만큼 좋아져요!