출처: https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969
1. DOM Tree
브라우저가 HTML document를 이용해 node를 만든 다음, 이 node 객체로 트리 구조를 만든다. (브라우저는 HTML 파일을 읽으면서 HTML 요소를 만나면 Node라고 하는 Javascript 객체를 만든다)
2. CSS Object Model (CSSOM)
DOM을 만든 다음 브라우저는 모든 소스(external, embedded, inline, user-agent, etc.)에서 CSS를 읽고 CSSOM을 만든다. CSSOM이란 CSS Object Model의 약자로 DOM처럼 트리 구조이다.
3. Render Tree
Render-Tree는 DOM과 CSSOM을 결합해서 만든 트리 구조이다. 브라우저는 이 Render 트리를 이용해서 눈에 보이는 각 요소의 레이아웃을 계산하고 화면에 그린다. 렌더 트리가 만들어지기 전까지는 화면에 아무것도 출력되지 않는다. 이런 이유로 DOM과 CSSOM 트리가 모두 필요한 것이다.
렌더링 순서
웹페이지가 로드되면 브라우저는 먼저 HTML 텍스트를 읽고 이걸로 DOM 트리를 만든다. 그러고 나서 CSS를 처리하고 CSS로 CSSOM 트리를 만든다. DOM, CSSOM 트리가 만들어진 다음 이 두 트리로 Render 트리를 만든다. Render 트리가 만들어지면 브라우저는 요소 하나하나를 화면에 출력한다.
브라우저가 script 파일을 다운로드하는 방법
✨ script 요소는 parser-blocking 한 script이다.(HTML 파싱을 막는다는 의미)
브라우저는 script 요소를 만나면 script를 먼저 실행하고 그 다음에서야 HTML을 파싱해서 DOM tree를 만든다.
외부 script를 만나면 메인 스레드 바깥에서 다운로드하긴 하지만, 이 파일(script 파일) 다운로드가 끝날 때까지 메인 스레드 실행을 정지한다. 즉, 스크립트 파일이 다 다운로드 될 때까지 DOM 파싱을 하지 않는다.
참고: DOM은 브라우저가 제공하는 Web API다. Javascript는 DOM이 뭔지 모른다. DOM은 자바스크립트의 일부가 아니다.
왜 자바스크립트 파일을 다운로드하고 실행하는 동안 DOM 파싱이 정지 되는지도 저 블로그에 나와 있다.
