<script> 태그를 어디에 둘까, async, defer

source: youtube 드림코딩 엘리 강의
이웅모, 자바스크립트 deep dive

* <script> 태그를 어디에 둘까?

1) head 끝에 둘 때

2) body 끝에 둘 때

3) head 끝인데 async를 붙일 때

4) head 끝인데 defer를 붙일 때 👍

 

* 사용자가 html 파일을 다운로드 받으면

- 브라우저가 한 줄 한 줄씩 분석한다.
- 동기적으로, 위에서 아래 방향으로 순차적으로 파싱하고 실행한다.
- 이는 script 태그 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있다는 의미

 

* script 태그 위치 비교

1) head 끝에 둘 때

 

 

- html 파싱하다가 script 태그를 보면 html 파싱을 잠시 멈추고 필요한 js 파일을 다운로드 받아서 실행한 후 파싱하는 부분으로 넘어간다.

따라서 script 태그를 head 말고 body 끝부분에 많이 삽입한다

 

2) body끝에 삽입하는 경우

이 경우 페이지 부분이 파싱된 후 script를 받아오고 실행한다 ( 사용자가 페이지 컨텐츠를 볼 수 있다)

장점: 자바스크립트가 DOM을 조작하면 에러나는 경우 좋다
또한 js 로딩, 파싱, 실행으로 인해 HTML 요소들의 렌더링에 지장받는 일이 생기지 않아 페이지 로딩 단축

단점 : 웹사이트가 js에 의존적이라면 사용자가 정상적인 페이지를 보기 전까지는 fetching하고 실행하기까지 기다려야 한다.

 

 
* async, defer
- src어트리뷰드가 있을 때만 사용 가능
- 인라인 자바스크립트는 사용 불가
- html 파싱과 외부자바스크립트 파일 로드가 비동기적으로 동시에 실행, 하지만 실행 시점에 차이가 있다

 

* head끝인데 asyc를 붙일 때

<script async src="main.js"></script>

html을 파싱하면서 js파일을 다운로드 받는다. 이후 다운로드가 완료되면 html을 파싱하는 일은 잠시 멈추고, js 파일을 실행한다. 실행이 다 끝나면 parsing HTML을 다시 시작한다

fetching이 parsing과 병렬적으로 일어난다. => 다운로드 받는 시간을 절약할 수 있다.

단점 : 만약 js 파일에 querySelector를 이용해서 dom을 조작하려고 한다면 아직 parsing이 끝나지 않아서 정의되어 있지 않은 element의 경우 에러날 수 있다.

또한 parsing html이 완전히 끝나는데(중간에 block된다) 오래 걸려서 사용자가 불편할수 있다.
스크립트 태그의 순서보장도 X

 

https://www.youtube.com/watch?v=tJieVCgGzhs&t=803s

 

[ js 파일 여러 개 다운로드 받을 때 ]

 

 

먼저 다운로드 받은 파일을 실행한다

정의된 스크립트 순서 상관없이 다운로드 먼저 받은대로 실행한다. 따라서 실행 순서가 중요하다면 defer를 사용해야 한다.

 

4) head+defer

 

 

parsing하다가 script 태그를 만나면 js를 병렬적으로 다운로드받고 parsing HTML이 끝나면(DOMContentLoaded 이벤트) 다운로드받은 js파일을 실행한다.

 

[ 여러 파일 다운로드 받는 경우 ]

 

 

script 태그 순서대로 실행된다

head 안에 defer 옵션 쓰는게 안전하다!