<script> async와 defer의 차이점

head에 포함되었을 때

parsing HTML 하다가 script src를 발견하고

하던 parsing을 멈추고 필요한 자바스크립트를 서버에서 다운받아서 작동시키고

중단한 parsing을 다시 실행하다. 

만약 js파일의 용량이 매우 크고 인터넷도 느리면 사용자가 웹사이트를 보는 데 까지 많은 시간이 소요된다.

body안에 맨 밑에 포함되어 있는 경우

브라우저가 html을 다운받아서 parcing한 후 페이지가 준비가 된 다음에 스크립트를 발견해 서버에서 받아와서 실행한다.

 그래서 페이지가 사용자들에게 js를 받기도 전에 이미 준비가 되어서 페이지의 컨텐츠를 빨리 볼 수가 있다.

단점은 사용자가 기본적인 html 콘텐츠를 빨리 본다는 장점은 있지만 만약 웹사이트가 자바스크립트에 굉장히 의존적인 상태 (서버에 있는 데이터를 받아온다던지, 도움 요소를 이쁘게 꾸며 준다던지, 이렇게 동작하는 웹사이트들)  라면 사용자가 의미있는 컨텐츠를 보고 정상적인 페이지를 보기 전까지는 서버에서 자바스크립트를 받아오는 시간과 실행하는 시간도 기다려야하는 단점이 있다.

 

head안의 script에 asyn을 쓰는이유

boolean타입의 속성값이기 때문에 선언하는 것만으로도 true로 설정이 되어서 asyn옵션을 사용가능하다.

asyn를 사용하게 되면 브라우저 html을 parcing하다가 js를 병렬로 다운받는다.

 

다운이 다 되면 parcing을 멈추고 js를 실행하게 됩니다

 장단점은 

body안에 쓰는거보다 다운받는 시간을 절약할 수 있지만 html이 parcing되기도 전에 js가 실행되기 때문에

만약 자바스크립트 파일에서 selector를 이용해서 dom 요소를 조작한다고 하면 조작하려는 시점에

사용자가 원하는 요소가 정의되지 않을 수도 있다. 

그리고 중간에 js를 실행하기 때문에 사용자가 페이지를 보는데 시간이 여전히 조금 더 걸릴 수 있는 단점이 있다.

 

head안의 script에 defer을 쓰는경우

parcing이 끝나고 js가 끝나면 실행

 

즉 모든 옵션을 다 살펴봤을 때 head안에 defer을 옵션을 이용해서 쓰는 것이 효율적이고 안전하다고 볼 수 있다.