브라우저 렌더링 파이프라인

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다.

이 과정은 크게 5가지로 분류가 됩니다.

1. DOM 트리 생성

브라우저가 HTML 파일을 받으면, 이 파일을 바이트 단위로 읽기 시작합니다.

브라우저의 HTML 파서는 이 바이트들을 문자로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다.

이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미합니다. HTML 토큰이 생성되면 브라우저는 이를 기반으로 DOM 트리를 생성합니다 

2. CSSOM 트리

동시에 브라우저는 CSS 파일도 파싱을 진행합니다. CSS 파일 역시 바이트로 전송되므로, 브라우저는 이를 문자로 변환한 뒤 CSS 규칙으로 나눕니다. 각 CSS 규칙은 선택자인 셀렉터와, 선언인 디클라레이션으로 구성이 되는데 선택자는 스타일을 적용할 HTML 요소를 정의하고 선언은 적용할 스타일을 정의합니다. 브라우저는 이 CSS 규칙들을 기반으로 CSSOM(Cascading Style Sheets Object Model) 트리를 생성합니다. CSSOM 트리는 DOM과 유사하게 트리 구조를 가지며, 각 노드는 해당 노드에 적용될 스타일 정보를 포함합니다.

3. 렌더 트리

브라우저는 DOM과 CSSOM을 결합하여 렌더트리를 생성합니다. 렌더트리는 화면에 실제로 표시될 요소들로만 구성이 됩니다.

예를 들어 display: none; 속성이 있는 요소는 렌더트리에 포함되지 않습니다.이는 렌더트리가 실제로 화면에 그려질 요소들만을 포함하기 때문입니다. 렌더 트리의 각 노드는 DOM 트리의 요소와 연결되며, CSSOM 트리에서 해당 요소에 적용된 스타일 정보를 포함합니다.

즉, 렌더 트리는 HTML 문서의 구조와 각 요소의 스타일 정보를 모두 포함한 트리라고 볼 수 있습니다.

4. 레이아웃

렌더 트리가 생성된 후, 브라우저는 이 트리를 사용해 각 요소의 정확한 위치와 크기를 계산합니다. 이 과정이 바로 레이아웃 입니다. 레이아웃 과정에서는 렌더 트리의 각 노드가 화면에 어디에 위치할지, 그리고 얼마나 큰지를 계산하게 됩니다. 이 계산은 화면의 뷰포트 크기와 같은 정보에 의존합니다. 예를 들어, 화면 크기가 변경되면 브라우저는 레이아웃 과정을 다시 수행해야합니다. 이 과정을 리플로우라고도 하는데, 리플로우는 성능에 영향을 줄 수 있으므로 이를 최소화하는 것이 좋습니다.

5. 페인팅

레이아웃이 완료되면, 브라우저는 각 요소를 실제로 화면에 그리는 작업을 시작합니다.

이 과정을 페인팅이라고 합니다. 페인팅 단계에서는 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려집니다.

6. 컴포지팅

브라우저는 화면에 그려질 요소들을 각각의 레이어로 분리하고, 이 레이어들을 결합하여 최종 화면을 구성합니다.

이 과정에서는 GPU를 활용하여 각 레이어를 빠르게 합성합니다. transform과 opacity와 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고, 이 컴포지팅 단계에서만 처리가 됩니다.

이 덕분에 이러한 속성을 사용하는 애니메이션은 더 부드럽고 빠르게 실행될 수 있습니다. 컴포지팅 단계는 GPU 가속을 활용하여 성능을 최적화하고, 화면에 최종적으로 표시되는 결과를 빠르게 생성하는데 중요한 역할을 합니다.