브라우저가 웹페이지를 화면에 표시하기 위해 거치는 과정을 렌더링 파이프라인이라고 한다.
1. DOM생성
브라우저가 HTML파일을 받으면, byte단위로 읽기 시작하고 브라우저의 파서는 바이트들을 문자로 변환한다.
이후 이 문자를 다시 HTML 토큰으로 변환하는데 토큰들은 각각의 태그와 그안에 포함된 텍스트, 속성등을 의미한다.
2. CSSOM생성
브라우저는 CSS파일을 파싱한다. CSS파일 역시 바이트로 전송되므로 브라우저는 문자로 변환한 뒤 CSS 규칙으로 나눈다. 각 CSS 구칙은 선택자(Selector)와 선언(decaration)으로 구성되는데 선택자는 스타일을 적용할 HTML 요소를 정의하고, 선언은 적용할 스타일을 정의한다.
브라우저는 CSS규칙들을 기반으로 CSSOM 트리를 생성한다. CSSOM트리는 DOM과 유사하게 트리 구조를 가지며 CSSOM트리의 각 노드는 DOM트리의 노드에 적용할 스타일 정보를 가지고 있다.
3. 렌더트리 생성
이제 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 렌더 트리는 화면에 실제로 표시될 요소들로만 구성된다.
4. 레이아웃
렌더트리가 생성된 후 브라우저는 이 트리를 사용해 각 요소의 정확한 위치와 크기를 계산한다.
이 과정에서 리플로우(reflow), 리페인트(repaint)가 발생한다.
5. 페인팅
레이아웃이 완료되면 브라우저는 각 요소를 실제로 화면에 그리는 작업을 시작한다. 페인팅 단계에서는 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려진다.
6. 컴포지팅
브라우저는 화면에 그려질 요소들을 각각의 레이어(layer)로 분리하고, 이 레이어들을 결합하여 최종 화면을 구성한다.
이 과정에서 GPU를 활용하여 각 레이어를 빠르게 합성한다.
