# Composite Layer
[Browser] Composite
브라우저의 렌더링 과정을 간략히 하면 아래와 같다. 스타일 계산 ➡️ layout(reflow) ➡️ 레이어트리 갱신 ➡️ paint(repaint) ➡️ composite 이 과정 중 마지막인 Composite 과정에 대해 알아보고자 한다. 정의 레이어들의 합성(composite)하여 한장의 bitmap으로 만드는 과정. 간단히 말하면 여러 레이어를 하나의 레이어로 만드는 과정이다. Layer가 생성되는 조건 CSS 파싱 과정에서 Composite Layer를 생성하는 요소들이 있다. ` 혹은 ` 태그 사용 3D, 2D transforms, opacity 적용(opacity는 1보다 작아야) animation 이나 transition 사용 iFrame일 경우 backface-visibility 가 hidden일 경우 이를 이용한 성능 개선 Composite Layer 생성은 CPU와 GPU가 통신하는 단계입니다
Composite Layer(feat. css, js 애니메이션)
css, js 애니메이션에 대해 공부하다가 알게 된 사실을 정리해 본다. 브라우저가 콘텐츠를 화면에 나타내기 까지의 과정은 paint까지만 알고 있었는데, (이전포스트) 사실 composite라는 과정이 더 있었다. 이 과정에서 스타일 지정 방식에 따라 화면에 나타낼 요소들이 레이어로 분류되어 계층이 결정되고, 애니메이션을 처리하기 위해 GPU를 이용한다는 사실을 알게 되었다. 또, requestAnimationFrame()의 역활에 대한 정의가 모호했는데 이번 기회에 구체적으로 알게 되었다. ✨ Reflow, Repaint가 일어나면 1. Recalculate Style 요소에 적용할 스타일을 계산