웹 브라우저의 렌더링 과정

 

항상 궁금하면서도 제대로 정리하지 못했던,

브라우저에 HTML 문서가 렌더링 되는 과정을 간단하게 정리해보았다.

 

---

 

렌더링 (Rendering)

브라우저에서 요청 받은 컨텐츠나 데이터를 화면에 그리는 과정을 말한다.

 

렌더링 엔진 (Rendering engine)

브라우저는 사용자 인터페이스, 브라우저 엔진, 자바스크립트 해석기 등 다양한 구성요소를 갖고 있다.

 

그 중에서 렌더링 엔진은 이름 그대로 렌더링을 하는 역할이다. 

즉, 요청한 HTML나 CSS를 파싱해서 화면을 그리는 과정을 담당한다.

 

브라우저마다 다른 렌더링 엔진을 사용하는데,

파이어폭스는 게코(Gecko) 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다.

 

따라서 렌더링 엔진마다 자세한 과정은 다를 수 있지만 기본적인 동작 과정은 아래와 같다.

 

 

1. DOM Tree 구축

DOM은 Document Object Model로 HTML 문서의 객체 표현이다.

렌더링 엔진 내부의 HTML 파서는 HTML 문서를 파싱하여 각 태그를 DOM 노드로 생성하고, 

생성된 DOM노드들을 병합하여 트리 구조를 만드는데 이를 DOM Tree라고 한다.

* DOM Tree의 가장 최상위는 문서(document)다.

 

 

2. CSSOM Tree 구축

CSSOM은 CSS Object Model로 CSS 문서의 객체 표현이다. 간단하게 CSS대상인 DOM이다.

DOM Tree와 마찬가지로 CSS 파서가 style sheet들을 파싱하여 CSSOM Tree를 만든다.

* CSSOM이 트리구조를 이루는 이유는 스타일을 적용할 때 하향식으로 적용하기 때문.

 

 

3. Render Tree 구축

DOM Tree와 CSSOM Tree를 이용하여 Render Tree(이하 렌더트리)를 구축한다.

렌더 트리는 화면에 표시되는 노드들로 구성되어 있기 때문에,

head, meta 혹은 CSS에 의해 숨겨지는 노드들은 렌더 트리에 포함되지 않는다.

단, hidden속성으로 숨겨진 노드는 공간은 포함하기 때문에 트리에 포함된다. 

 

 

4. Render Tree 배치 (Attachment)

렌더 트리가 생성되면, 노드의 정확한 위치와 크기를 계산하는 과정을 수행한다.

이를 Layout 혹은 Reflow라고 한다.

모든 상대적인 측정값(%)은 화면에서의 절대적인 픽셀(px)로 변환된다.

 

 

5. Render Tree 그리기 (Paint)

최종적으로 렌더 트리의 각 노드를 화면에 그리는 과정이다.

그리는 과정은 브라우저의 UI 기반 요소를 사용하여 나타낸다.

 

 

 

 

이 과정들은 점진적으로 진행된다.

모든 HTML 파싱이 전부 완료되어야 다음 과정을 진행하는 것이 아니라

빠른 렌더링을 위하여 파싱과 동시에 화면에 배치하고 그린다.

즉, 서버에서 데이터를 전송받는대로 노드를 생성하고, 완료되는 일부를 화면에 먼저 표시하는 것이다.

 

---

[참고]

 

Naver D2 - 브라우저는 어떻게 동작하는가?

beomy - [Browser] 브라우저 렌더링