html 파싱 과정
-
html 파싱 도중에 link 태그나 script 태그를 만나게 됩니다.
-
link 태그를 만나면 클라이언트는 css 파일을 요청하고 css 파일을 파싱하여 CSS object model 트리를 생성합니다.
-
script 태그를 만나면 클라이언트는 js 파일을 요청하고 js 파일을 파싱하여 syntax 트리를 생성합니다.
-
이때 js 파일을 파싱하고 실행하는 동안 랜더 트리의 생성이 중지됩니다.
-
따라서 script 태그의 위치가 로딩 과정에 영향을 미치게 됩니다.
1 - head 안에 있는 경우
-
랜더 트리가 생성되기 전에 실행됩니다.
-
랜더 트리 생성 도중 멈추고 script 태그를 실행하게 되므로 무거운 코드를 넣게 되면 로딩 속도에 영향을 미치게 됩니다.
-
랜더 트리가 생성되기 전에 js 가 실행되므로, js 파일 내에서 dom 요소를 조작하는 코드가 있는 경우 문제가 생길 수 있습니다.
2- body 태그가 끝나기 직전에 넣은 경우
-
모든 화면이 랜더링된 이후에 script 태그가 실행이 되므로, 초기 화면이 출력되는 속도가 빠릅니다.
-
페이지가 js 코드에 의존적인 경우, 어차피 js 가 모두 실행 된 뒤에 의미있는 컨텐츠를 보여주게 되므로 최종 화면 출력은 크게 빠르지 않을 수 있다.
3 - head 태그에 넣고, async 속성을 추가한 경우
-
html 파싱 도중 script 를 만나면 js 파일을 다운받으면서 동시에 html 파싱을 진행합니다.
-
js 다운로드가 끝나면 html 파싱을 중단하고 js 를 실행합니다.
-
js 실행이 끝나면 다시 html 을 파싱합니다.
-
html 파싱과 js 파일 다운로가 동시에 이루어져 로딩 시간을 줄일 수 있습니다.
-
랜더 트리가 생성되기 전에 js 가 실행되므로, js 파일 내에서 dom 요소를 조작하는 코드가 있는 경우 문제가 생길 수 있습니다.
4 - head 태그에 넣고, defer 속성을 추가한 경우
-
html 파싱과 동시에 js 파일을 다운받습니다.
-
html 파싱이 모두 끝난 뒤 js 를 실행합니다.
-
html 파싱과 js 파일 다운로가 동시에 이루어져 로딩 시간을 줄일 수 있습니다.
