1. Parsing
HTML은 DOM tree, CSS은 CSSOM tree 형태로 구성한다.
2. Style
DOM tree + CSSOM tree = Rendering tree를 구성한다. Rendering tree는 실제 화면에 보여질 tree로 대표적인 동작 예시로 visibility: hidden은 요소는 차지하고 눈에는 보이지 않기에 tree에 존재하지만 display: none은 요소의 영역 자체가 사라지기에 빠지게 된다.
3. Layout
Rendering tree를 순회하며 각 노드들의 영역, 크기등이 계산된다. 대표적인 동작 예시로 %를 통해 css가 구성된 경우 현 화면에서 보여질 크기를 px단위로 계산하는 역할을 수행한다.
4. Paint
위 Layout 단계에서 계산했던 px로 실제 화면단을 구성한다. 이 때, 여러 레이어로 관리된다.
5. Composite
위 Paint 단계에서 구성된 레이어를 겹쳐 실제 화면에 출력하여 사용자는 렌더링된 브라우저를 볼 수 있다.
Junior FE Developer