브라우저 렌더링 원리(파이프라인)에 대해서 설명해주세요.

<aside> 💡

답변

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다. 이 과정은 크게 6단계로 나눌 수 있습니다.

1. HTML을 파싱하여, DOM을 생성합니다.

2. CSS를 파싱하여, CSSOM을 생성합니다.

   2.5. JS를 실행합니다. 1번의 HTML 파싱 중, script 코드가 있다면, HTML 파싱이 중단됩니다.

3. DOM과 CSSOM을 결합하여, 렌더 트리를 생성합니다.

   1. 화면에 실제로 표시될 요소들로만 구성됩니다. 예를 들어 display: none 속성처럼 보이지 않고, 공간 차지도 없는 요소는 렌더 트리에 포함되지 않습니다.

4. 레이아웃 단계에서는 브라우저가 렌더 트리를 사용해 각 요소의 정확한 위치와 크기를 계산합니다.

   1. 이 계산은 화면의 뷰포트(viewport) 크기와 같은 정보에 의존합니다.
   2. 성능과 직결된 단계입니다.

5. 페인팅 단계에서는 브라우저가 각 요소를 계산된 크기/위치에 따라 실제로 화면에 그리는 작업을 시작합니다.

   1. 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려집니다.
   2. 성능과 직결된 단계입니다.

6. 컴포지팅 단계에서는 브라우저가 화면에 그려질 요소들을 각각의 레이어(layer)로 분리하고, 이 레이어들을 결합하여 최종 화면을 구성합니다.

   1. transform과 opacity와 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고, 이 컴포지팅 단계에서만 처리됩니다. </aside>

• 2.5는 브라우저 렌더링 파이프라인에는 포함되지 않지만, 브라우저 렌더링 중 실행되는 과정

브라우저 렌더링 파이프라인 – 실습 중심 보강 자료