[Browser] 브라우저 렌더링 순서

🚩 1줄요약

브라우저는 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 렌더링 하는 것이다.

🚩 렌더링 순서

1. 브라우저는 HTML, CSS, JS, IMG등 렌더링에 필요한 리소스를 request하고 서버로부터 response 받는다.

2. 서버로부터 응답된 HTML, CSS를 파싱하여 html태그의 부자관계를 반영한 DOM과 css버전 dom인 CSSOM을 생성하고 결합해 기본적인 렌더 트리를 생성한다.

3. 브라우저의 자바스크립트 엔진이 서버로부터 응답된 자바스크립트를 파싱하고 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있고, 변경하면 다시 렌더 트리로 결합된다.

4. 렌더 트리를 기반으로 HTML의 레이아웃을 계산하고 브라우저 화면에 HTML요소를 페인팅한다.

🚩 용어정리

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

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

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