페이지 렌더링 순서

흔히, script는 HTML 끝에 선언을 해야, 페이지 로딩 시 지연이 발생하지 않는다고 하는데, 왜 그럴까? 라는 의문으로 시작했다.

웹 브라우저에서 HTML, CSS, JS 는 어떻게 화면에 그려질까?

1. Loading

HTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림을 읽는 과정으로 Loader가 역할을 담당하고 있다.

2. Parsing

Parsing은 HTML, XML Parser를 이용해서 DOM Tree, CSSOM Tree를 생성하는 과정이다. 

3. Rendering Tree

Rendering Tree = Dom Tree + CSSOM Tree 라고 할 수 있다. Rendering Tree는 화면에 표시하기 위한 위치, 크기 정보, 그리기 순서 등을 저장하기 위한 트리이다.

지금까지 Dom Tree, CSSOM Tree, Rendering Tree가 나왔는데, 이들을 간단히 설명해보겠다.

구글에 보면 아래 이미지와 같이 자세히 설명이 되었는데, 요약하자면 ...

DOM Tree는 루트에서 시작하여 HTML의 Tag를 읽어 형성하며, CSSOM Tree 또한, CSS 파일을 읽어 형성하고 있다.

자세한 내용은 구글 문서를 확인해보자 (https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko)

Render Tree는 페이지를 렌더링하는 과정에서 필요한 노드만을 포함하고 있는 트리이다. 

위에 이미지를 보면 CSSOM Tree에 span 태그에 대해 display:none이 정의되어 있는데, Render Tree에서는 확인할 수 없다. 그 이유는 display:none으로 설정된 태그는 실제 

화면에서는 보이지 않기 때문에 Render Tree에서는 제외된 것이다.

4. Layout & Painting

렌더링 하기 위한 모든 정보를 포함하고 있는 Render Tree를 생성하면, 각 노드에 정의된 스타일을 이용해서 계산하여 화면에 위치시키고 그린다.

그런데 여기서 끝이 아니다! 지금까지 나오지 않는 JS는 어떻게 되는 것인가?! JS는 defer, async(default) 옵션을 통해 로딩이 된다. 

async 옵션이 부여될 경우, 파싱하는 과정과 병렬적으로 JS 를 읽을 수 있다. 단, JS 구문을 실행하는 동안에는 파싱하는 과정이 정지된다.

defer 옵션이 부여될 경우, 동일하게 파싱하는 괒어과 병렬적으로 JS를 읽을 수 있다. 단, JS 구문을 실행은 파싱이 모두 완료된 시점(DomCotentLoaded)에 할 수 있다.

구글 개발자 문서를 참조하여, HTML, CSS, JS가 그려지는 부분을 정리해보았다.