[JavaScript] JavaScript HTML에 링크하는 방법, async와 defer

 

JavaScript를 HTML에 링크하는 방법

 

1. script 태그가 head에 위치한 경우

✅ script 태그가 보이면 HTML 파싱을 멈추고 스크립트 파일을 실행한다.

✅ 단점 : 파일이 크면 느려진다.

 

2. script 태그가 body 내 끝 부분에 위치한 경우

✅  페이지가 완성된 후 스크립트 파일을 패칭한다.

✅  장점 : HTML 컨텐츠를 빨리 노출시킬 수 있다.

✅  단점 : JavaScript에 의존적인 페이지인 경우 사용자가 저상상적인 페이지를 보기 전까지 오래 걸릴 수 있다.

 

3. head 태그 안에 script 태그를 넣되 async 옵션을 사용한 경우

✅  브라우저가 HTML을 파싱하다가 script 파일을 병렬로 받도록 명령만 해놓고 파싱 후에 JavaScript 파일이 다운이 완료되면 파싱을 멈추고, script 파일을 실행 후에 다시 파싱한다.

✅  장점 : body 끝에 사용하는 것보단 다운로드 받는 시간을 절약할 수 있다.

        →  패칭이 파싱하는 동안 병렬적으로 이루어지기때문

✅  단점 : 파싱 전에 script 파일이 실행되면, 만약 쿼리셀렉터로 DOM 요소를 조작해야할 경우 필요한 요소가 제대로 정의되어있지 않을 수 있다. → 위험성 有

      ➕ 파싱하는 동안 script 파일을 실행하기 위해 파싱이 멈출 수 있다 → 사용자가 페이지를 보는 데까지 오래 걸릴 수도 있다.

 

4. head 태그 안에 script 태그를 넣되 defer옵션 사용한 경우

✅  파싱 하다가 script  파일을 받도록 명령만 해놓고 다시 파싱한다.

✅  파싱이 끝난 후 script 파일 실행한다.

 

async vs defer 차이점

✅ async  : 옵션으로 다수의 script 파일을 받게 되면, 먼저 받아진 script 파일이 실행된다.

                    ➕ 정의된 script 순서와 상관 없음. 순서에 의존적인 경우 사용하지 말 것

✅  defer : 파싱하는 동안 script 파일을 다 다운받기때문에 정의된 script 순서대로 실행된다.

 

⭐ 결론 : defer가 제일 낫다!

 

 

 

---

학습을 위해 유투브 드림코딩 자바스크립트 강의를 보고  정리한 글입니다.

 

Reference

https://www.youtube.com/watch?v=tJieVCgGzhs