DOM, CSSOM 생성
렌더링을 위해선 우선 DOM 및 CSSOM 트리를 생성해야 하기 때문에 HTML 및 CSS를 가능한 한 빨리 브라우저에 제공해야 합니다.
Render Tree 생성
DOM Tree와 CSSOM Tree로 Render Tree라고 부르는 또 다른 트리를 생성합니다.
Render Tree에는 실제 화면에 표현되는 노드들로만 구성됩니다. 예를 들어 <head>와 같은 비시각적 요소나 display: none인 노드는 트리에 포함되지 않습니다. (참고로, visibility: hidden 노드는 레이아웃에서 공간을 차지하되 비어있는 상태이므로 렌더 트리에 포함됩니다.)
Layout(reflow) - Render Tree 배치
Layout 프로세스에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 '상자 모델'이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.
Paint(레스터화) - Render Tree 그리기
시각화되는 단계로 배치된 요소들을 Paint하여 브라우저 화면에 표시합니다.
front-end javascript vue react jiujitsu