[JS] 웹 페이지 HTML 렌더링 순서, CSS 파일 head안에 넣는 이유, Script 파일 body안에 넣는 이유

티스토리 뷰

JoonPyo-Hong 2021. 7. 31. 23:45

먼저, 웹 브라우저 화면이 만들어지는 순서를 알아보자. (렌더링 순서)

서버로부터 전달받은 리소스 스트림을 로더가 읽는 과정이다.

HTML/XML 파서를 이용해서 DOM Tree(HTML의 태그), CSSOM Tree(CSS 파일)를 생성하는 과정이다.

DOM Tree(HTML의 태그), CSSOM Tree(CSS 파일)를 이용해서 Render Tree를 생성한다.

CSS가 display:none 으로 구성된 HTML 태그는 화면에서는 보이지않고 공간만 차지하기 때문에 렌더링 트리(Rendering Tree)를 생성하는 과정에서 제외된다.

<div style='display:none'></div> // 렌더링 제외됨

Render Tree가 생성되면 Render Tree가 가지고 있는 스타일과 속성에 따라서 웹 브라우저의 어느위치에 배치하고 어떤크기로 배치할지 정하고 그리는 과정이다.

CSS 파일 위치, Script 파일 위치 이유

Parsing 과정에서 DOM Tree(HTML의 태그)가 생성되도 CSSOM Tree(CSS 파일)가 없으면 렌더링이 되지 않는다.

빠르게 CSSOM Tree(CSS 파일)를 읽어와서 렌더링을 완성 하기위해서 <head> 안에 CSS 파일을 넣어야 한다.

(인터프리터에서 파일을 왼쪽에서 오른쪽 위에서 아래로 읽는다.)

Parsing 과정에서 <head> 안에서 HTML/XML 파서가 Scrpit 파일을 만나게 되면 Parsing을 멈추고 Script 파일을 읽는다.

Script 파일을 읽는 동안 렌더링에 방해가 되어 무거운 스크립트가 실행될 때는 사용자 입장에서 웹페이지가 느리게 보인다.

(문서를 초기화하거나 설정하는 가벼운 Script 파일은 <head> 안에 넣어도 된다.)

[JS] var, let, const 차이 (0)	2021.08.27
[JS] javaScript 형변환 (숫자를 문자로, 문자를 숫자로) + typeof (5)	2021.08.02
[JS] 소수점 계산 오류 해결법 (부동 소수점) (17)	2021.07.30
[JS] jQuery에서 remove, detach, empty 차이 (11)	2021.07.29
[JS] disabled, readonly 사용법과 차이점 (8)	2021.07.28