브라우저의 렌더링 과정

브라우저의 렌더링 과정은 어떻게 될까?

1. 브라우저 주소창에 특정 주소를 입력한다.
2. 해당 주소의 서버를 찾아가고 DNS가 실제 서버가 있는 곳으로 연결을 해준다. 이때, http, https 각 조건에 맞는 방식으로 통신한다.
3. 서버의 기본 설정이 대부분 index.html로 되어 있으므로 이 파일을 서버에서 클라이언트쪽으로 보내준다.
4. index.html을 받은 브라우저에서는 텍스트로 이루어진 이 파일을 파싱하면서 DOM트리를 만들어 나간다.
5. html을 읽다 중간 link tag를 만나 CSS요청이 발생하면 요청과 응답을 거쳐 CSS를 파싱한다.
6. CSS 파싱이 종료되면 잠시 중단 되었던 html을 다시 읽고 DOM 트리를 완성시킨다.
7. 완성된 DOM 트리와 CSSOM 트리를 합쳐 렌더트리를 만들게 된다.
8. html 파서는 파싱을 하다가 script tag를 만나면 JavaScript코드를 실행하기 위해서 파싱을 중단한다.
9. 제어 권한을 JavaScript engine에 넘기고 JavaScript코드 또는 파일을 로드해서 파싱하고 실행한다.

DOM

브라우저가 html파일을 읽을 때 브라우저가 이해할 수 있고 메모리에 보관할 수 있는 객체로 변환시키게 된다. 객체로 변환후 Tree구조를 생성하는데 이것이 DOM이다. 이는 개발자가 정의한 요소들이 tree구조로 되ㅓ어 있으며 이것을 이용해서 JavaScript로 웹 페이지를 제어할 수 있다.

CSSOM

브라우저는 html을 DOM으로 만들면서 개발자가 정의해놓은 CSS와 기번적으로 설정되어있는 CSS를 cascading rule에 따라서 병합하여 CSSOM을 만들게 된다.

Render Tree

브라우저가 html파일을 읽으면 제일 먼저 DOM Tree를 만들고 그 다음 CSS파일을 읽은 다음 최종적으로 확정된 CSS Style tree를 만든다. 이후 브라우저에서 표시 될 요소들만 Render Tree에 선별해서 표시한다. 즉, DOM + CSSOM = Render Tree인 것이다.

Rneder Tree를 빠르게 만들 수 있는 방법

심플하게 보자면 DOM요소와 CSS규칙이 적을수록 빠르다. 즉, html의 경우 div태그의 남용 쓸데없는 wrapping등 불필요한 태그 사용을 자제하는것이 방법이 될 수 있다.

참고
DOM과 virtual DOM