브라우저 렌더링 과정

브라우저 렌더링 동작 과정

렌더링의 기본적인 동작 과정은 다음과 같다.

1~2. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)

3. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)

4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)

5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)

6. 레이어를 합성하여 실제 화면에 나타낸다. (Display)

 

 

0. 요청, 응답

처음 웹페이지에 접속하면 HTML, CSS, Javascript 파일, 그리고 필요하다면 이미지나 폰트같은 파일들을 서버에 요청하고 응답 받게 된다.

그렇다면 서버에 요청은 어떻게 전송할까? 브라우저에 있는 주소창이 그 역할을 한다.

주소창에 URL을 입력하고 엔터키를 누르면, URL의 호스트 이름이 DNS(도메인 네임 서비스)를 통해 진짜 주소인 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 보낸다.

 

1. HTML 파싱, DOM 생성

응답으로 받아온 HTML 문서는 오직 텍스트로만 이루어져있다.

일단은 이 문서를 브라우저가 이해할 수 있는 형태로 바꾸는 작업이 필요한데, 여기서 말하는 형태가 바로 DOM 구조이다.

 

2. CSS 파싱, CSSOM 생성

앞서 html 파일을 파싱하다가 <link>, <style> 태그를 만나면 파싱을 잠시 멈추고 리소스 파일을 서버로 요청한다

이렇게 가져온 CSS 파일도 HTML과 마찬가지로 파싱을 한다. 

 

3. 렌더 트리 생성

DOM과 CSSOM은 굉장히 비슷하게 생겼지만, 서로 다른 속성들을 가진 독립적인 트리들이다. 알다시피 HTML은 구조를, CSS는 디자인을 담당하기 때문에 둘을 합치는 작업이 필요하다.

렌더 트리는 이름처럼 렌더링을 목적으로 만드는 트리이다.

 

 

 

4. 레이아웃(Layout) 단계

레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box 모델이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.

 

 

 

5. 페인팅

아시다시피, 픽셀을 채우는 것.

 

추가. 리플로우, 리페인트

리플로우: 레이아웃 계산을 다시하는 것
리페인트: 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것

 

만약 사용자가 브라우저 화면을 늘리거나 줄이는 등 크기를 조절하거나, 어떤 버튼을 눌러 화면에 요소가 추가되거나 삭제되는 경우가 생기면, 당연히 화면에 있던 요소들의 위치나 크기 등이 바뀌는 일이 생기게 될 것이다. 굉장히 당연하게 여겨지지만, 이렇게 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소들의 위치와 크기를 다시 계산하고, 다시 그려서 보여주어야 한다. 이렇게 어떤 인터랙션으로 인해 앞서 보았던 레이아웃, 페인팅 과정을 반복하는 것을 리플로우, 리페인트라고 한다.