[WEB] 브라우저는 어떻게 렌더링할까?

웹 어플리케이션을 개발하다보면 DOM(Document Object Model)을 참조하거나 부득이하게 변경할 때가 있다. 이 때문에 "DOM은 정체"와, 퍼포먼스의 이유로 "브라우저는 어떻게 렌더링"의 과정이 궁금해지게 된다.

자주 쓰고 있는 웹이든 Vue.js든 본인이 사용하는 기술의 Lifecycle을 이해하는 것은 중요하다고 생각한다.

---

브라우저의 구성 요소

그림1. 브라우저의 구성요소

 그림1처럼 브라우저는 구성되어 있다. 네트워크를 가르쳐주시는 교수님 또는 책에서 종종 쓰는 Top-down 방식으로 보면 우리가 접하는 UI 레이어부터 이 UI의 백엔드까지 내려오게 된다.

 이번 포스트에서는 브라우저의 렌더링 과정을 다룰 예정이므로, 구성 요소 중 렌더링 엔진이 주인공이다. 브라우저의 렌더링 엔진은 요청한 컨텐츠를 표시한다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 우리가 보는 화면에 표시하게 해주는 것이다.

 브라우저 마다 사용하는 엔진이 다르다. 파이어폭스는 게코(Gecko)를, 사파리는 웹킷(Webkit)을 사용하고 있다. 크롬의 경우 웹킷을 사용하다가 웹킷을 Fork하여 블링크(Blink) 엔진을 자체적으로 구현하여 사용하고 있다.

---

렌더링 엔진의 동작 과정

그림2. 렌더링 엔진의 동작 과정

그림2는 렌더링 엔진의 동작 과정을 보여준다. 각 브라우저의 렌더링 엔진이 다르기 때문에 각 과정를 가르키는 용어가 조금씩 다르다.

각 과정에 따라서 간단히 설명해보겠다.

 

1. DOM 트리 구축위한 HTML 파싱

 

그림3. DOM(좌) CSSOM(우)을 시각화 한 그림

렌더링 엔진은 서버로부터 HTML 문서를 받아서 파싱하고 DOM(Document Object Map) 트리로 변환한다. 그 다음 CSS 파일과 함께 포함된 스타일 요소를 CSSOM(CSS Object Model) 트리로 파싱한다.

 

2. 렌더 트리 구축

그림4. Render Tree 구조도

그림4에서 볼 수 있듯이, 1. DOM 트리 구축위한 HTML 파싱에서 만들어진 DOM 트리와 CSSOM 트리로 렌더트리(Render Tree)라고 부르는 또 다른 트리를 생성한다. 즉 유저가 볼 실제 화면에 보일 트리의 형태가 만들어지게 된 것이다.

다른 그림 찾기하듯 DOM과 CSSOM의 결과물인 Render Tree를 보면 <span> 태그가 제외된 것을 알 수 있다. display: none 속성이 설정된 노드는 화면에서 실제로 보이지 않는 것을 의미하기 때문에, Render Tree를 만드는 과정에서 제외하게 된다.

 

3. 렌더 트리 배치

 

렌더 트리 생성이 끝나면 이 트리에 기반해 배치(Layout)가 시작된다. 즉, 아래의 그림에서처럼 Render Tree의 DOM과 스타일들을 기준으로 다음 과정에서 그릴 항목들을 배치한다.

그림5. Render Tree 기반 배치

4. 렌더 트리 그리기

 

 팁1: 렌더링 엔진은 그림1. 브라우저의 구성요소에 있는 통신 요소로부터 요청한 문서의 내용을 얻기 시작한다. 통신으로 부터의 데이터는 보통 8KB 단위로 전송되기 때문에, 이보다 큰 용량은 나누어서 올 것이다.

 

 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시한다. 즉 퍼포먼스의 측면으로 보면, 1. DOM 트리 구축위한 HTML 파싱 과정의 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크(통신)로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다. 따라서, 1~4과정이 반복되는 것이다.

 

 

 

브라우저별 렌더링 과정

그림6. 좌) Webkit기반 렌더링 과정, 우) Gecko기반 렌더링 과정

---

참고

https://vallista.kr/2019/05/06/브라우저-렌더링-과정/

https://d2.naver.com/helloworld/59361

https://boxfoxs.tistory.com/408

http://bit.ly/3137pmh

http://bit.ly/2Okn0fG

http://bit.ly/3137pmh

https://ko.wikipedia.org/wiki/브라우저_엔진