브라우저의 렌더링 과정(Critical Rendering Path)

sod0l 2024. 10. 2. 17:25

브라우저의 렌더링 과정(Critical Rendering Path)은 웹 페이지를 사용자에게 표시하기 위해 브라우저가 데이터를 처리하고 시각적으로 표현하는 일련의 단계이다. 이 과정을 이해하면 웹페이지가 어떻게 만들어지는지, 그리고 최적화할 부분이 어디인지 알 수 있다.

1. HTML 다운로드

사용자가 웹페이지를 요청하면 브라우저는 서버에서 HTML 파일을 다운로드한다. 이 파일은 웹 페이지의 구조를 정의한다.

2. HTML 파싱

다운로드한 HTML 파일을 읽어들여 DOM(Document Object Model)을 생성한다. DOM은 웹페이지의 각 요소를 객체로 표현한 구조이다. 예를 들어, `<h1>` 태그는 DOM에서 하나의 객체로 만들어진다.

3. CSS 다운로드

HTML을 파싱하면서 브라우저는 CSS 파일(스타일 시트)도 찾아 다운로드한다. CSS는 웹 페이지의 스타일을 정의한다.

4. CSS 파싱

다운로드한 CSS 파일을 읽어드려 CSSOM(CSS Object Model)을 생성한다. CSSOM은 스타일 규칙을 객체로 표현한 구조이다. 이 단계에서는 각 요소에 적용될 스타일을 정리한다.

5. 렌더 트리 생성

DOM과 CSSOM이 준비되면 브라우저는 렌더 트리를 만든다. 렌더 트리는 실제로 화면에 표시될 요소와 그 스타일의 정보를 포함한다. 예를 들어, `<h1>` 태그가 보이도록 설정된 경우에만 렌더 트리를 포함한다.

6. 레이아웃 계산

렌더 트리가 생성되면 브라우저는 각 요소의 정확한 위치의 크기를 계산한다. 이 과정을 레이아웃(Layout)이라고 하며, 각 요소가 화면에서 어디에 위치해야 하는지를 결정한다.

7. 페인팅

레이아웃이 완료되면 브라우저는 실제로 화면에 요소를 그리는 단계인 페인팅(Painting)을 수행한다. 이 단계에서는 요소의 색상, 텍스트 이미지 등을 그린다.

8. 합성

마지막으로 브라우저는 여러 레이어를 합쳐 최종적으로 화면에 표시한다. 이 과정을 합성(Compositioning)이라고 하고 여러 개의 레이어를 조합하여 최종 이미지를 만든다.

최적화 포인트

이 과정을 이해하면 최적화할 수 있는 부분을 알 수 있다. 예를 들어:

CSS 파일을 병합하거나 압축하여 다운로드 시간을 줄이기
HTML과 CSS의 순서를 조정하여 필요한 요소를 먼저 로드하도록 하기
자바스크립트 로딩 방식을 최적화하여 렌더링 차단을 최소화하기

이러한 최적화는 웹 페에지의 로드 속도를 개선하고 사용자 경험을 향상시키는데 큰 도움이 된다고 한다.