브라우저의 렌더링 과정

📝 렌더링이란?

HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것

파싱(parsing, 구문 분석): 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문접적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정

 

📝 렌더링 과정

1. 서버로부터 HTML 파일을 받는다.

2. HTML을 파싱하면서 CSS, 자바스크립트, 이미지 등 필요한 리소스를 요청.

3. DOM 트리 생성

4. CSSOM 트리 생성

5. DOM 트리와 CSSOM트리를 결합하여 Render 트리 생성

6. Layout - HTML 요소의 레이아웃(위치와 크기) 계산

7. Paint - 화면에 HTML 요소 그리기

8. Composite - Paint 단계에서 나누어진 레이어들을 합성해서 페이지 완성

 

📌 1. 서버로부터 HTML 파일을 받는다.

1. 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 바이트(2진수)를 응답한다.

 

📌 2. HTML을 파싱하면서 필요한 리소스를 요청한다.

1. 브라우저는 바이트 형태의 HTML 문서를 지정된 인코딩 방식을 기준으로 문자열로 변환한다.

<meta charset='UTF-8'>

2. 문자열로 변환된 HTML 문서를 읽어 코드의 최소 단위인 토큰들로 분해한다.

토큰(Token): 문법적으로 더는 나눌 수 없는 코드의 기본 요소

3. 각 토큰들을 객체로 변환하여 노드(node)들을 생성한다. 

4. 이 노드들로 구성된 트리 자료구조 DOM(Document Object Model)을 생성한다.

• 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성하는데, <link />, <img />, <script /> 태그를 만나면 DOM 생성을 중지하고 서버에 필요한 리소스를 요청한다.

- 1, 2번 과정
바이트 → 문자 → 토큰 → 노드 → DOM

 

📌 3. DOM 트리 생성

HTML 요소는 중첩 관계를 갖는데, 이 관계에 의해 요소 간 부자 관계가 형성된다. 이러한 HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다.

 

이 노드들로 구성된 트리 자료구조를 DOM(Document Object Model)이라 한다. 즉, DOM은 HTML 문서를 파싱한 결과물이다.

 

📌 4. CSSOM 트리 생성

서버에 요청한 CSS 파일이나, style 태그 내의 CSS를 HTML과 동일한 파싱 과정을 거치며 CSSOM(CSS Object Model)을 생성한다.

바이트 → 문자 → 토큰 → 노드 → CSSOM

 

CSS 파싱이 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다.

 

📌 5. DOM 트리와 CSSOM트리를 결합하여 Render 트리 생성

Render 트리는 렌더링을 위한 트리 구조의 자료구조이다. 따라서 브라우저 화면에 렌더링 되지 않는 노드(<meta />, <script /> 태그 등)와 CSS에 의해 비표시(display: none)되는 노드들은 포함하지 않는다.

 

📌 6. Layout - HTML 요소의 레이아웃(위치와 크기) 계산

Render 트리를 바탕으로 각 요소의 위치와 크기를 계산한다. (%, rem 단위 → px 단위)

 

노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생했을 때, 레이아웃을 다시 계산하는 것을 reflow라고 한다.

reflow: Layout → Paint → Composite 과정 재실행
css 속성: position, left, top, marign, font-size 등등

 

📌 7. Paint - 화면에 HTML 요소 그리기

화면을 여러 Layer로 분리하여 관리한다. 여러 레이어로 나누는 이유는 특정 요소가 수정되었을 때, 변경이 발생한 레이어만 수정하여 리렌더링 비용을 줄일 수 있기 때문이다.

 

레이아웃에 영향이 없는 변경이 발생했을 때, 다시 페인트 하는것을 repaint라고 한다.

repaint: Paint → Composite 과정 재실행
css 속성: background, border-radius 등등

 

🧷 참고

1. 모던 자바스크립트 Deep Dive 38장

2. https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko

3. https://www.youtube.com/watch?v=Mqh13dNI8jc

4. https://www.youtube.com/watch?v=z1Jj7Xg-TkU

5. https://www.youtube.com/watch?v=TZz9VHjJzMk