[ES6][JS] JS Import 하는 방법과 차이점

◆목표

JS Import 하는 방법과 차이점

HTML에 Import 하는 방법

---

1) Head 태그에 JS를 import 하는 방법
2) Body 태그에 JS를 import 하는 방법
3) Head 태그에 async를 붙여서 JS를 import 하는 방법
4) Head 태그에 defer를 붙여서 JS를 import 하는 방법

Import 방법별 브라우저 파싱 단계 및 특징

---

1. Head 태그에 JS를 import 하는 방법
   html 파일을 위에서부터 순차적으로 파싱하다가 head 부분에 있는 script 태그를 만나면 해당 src에 있는 파일을 다운로드 한다.

parsing HTML. => blocked (fetching js / executing js 파일 다운) => parsing HTML

단점: 만약 다운받는 파일이 고용량이라면 클라이언트가 브라우저를 이용하는데 시간이 오래걸린다.

2. Body 태그에 JS를 import 하는 방법

   paring HTML 완료 -> page is. ready => fetching js => execute js

장점: HTML 파일을 일찍 볼수있다.  
단점: 만약 js에 의존적인 html이라면 정상적으로 클라이언트가 사용하기에는 무리가 있다.

3. Head 태그에 async를 붙여서 JS를 import 하는 방법

parsing HTML(fetching js) => blocked(executing js) => parsing HTML

장점: 이런 경우에는 head 태그에 선언했을때 보다 fetching js가 병렬적으로 이루어지기 때문에 속도가 상대적으로 빠름  
단점: 완전히 parsing HTML 이 끝난상태가 아니라서 JS가 DOM객체 접근할려고 할때 js에러를 발생할 수 있다.클라이언트가 완전히 페이지 보기에는 여전히 시간이 걸림

4. Head 태그에 defer를 붙여서 JS를 import 하는 방법

장점: defer은 async의 단점인 HTML parsing이 완료되기전에 DOM객체 접근하는것에 대해 에러날 가능성이 있었는데 defer은 병렬적으로
    fetching js를 하고 HTML parsing이 완료되면 그때 excuting JS를 하여 단점을 보완하였다.