defer vs async

javascript 를 파싱해올 때에 순서 또한 고려해야 좋은 코딩을 할 수 있다.

크게 네가지의 경우를 통해서 javascript를 불러와보자.

(자료출처 : dream-coding)

 

첫 번째, head 내부에서 javascript를 불러오기.

만약 js 파일이 엄청나게 커진다면, 웹페이지를 띄우는 데에 상당히 오랜 시간이 걸릴 수 있다.

 

 

 

두 번째, body 태그 뒤에서 javascript 불러오기.

만약, javascript나 애니메이션에 많이 의존적인 웹페이지라면 곤란한 상황이 발생한다.

 

 

 

세 번째, head 내부에서 async 로 불러오기.

파싱과 함께 병렬적으로 페칭이 되고 실행할때 잠시 block 되고 js가 실행되기 때문에 시간이 절약된다.

그러나 js가 html보다 먼저 실행되기 때문에 js가 html 엘리먼트를 사용해야 한다면 불러오지 못하는 오류가 발생한다.

그러나, 파싱을 하다가 중간에 block이 되기때문에 중간에 멈출 수 있다.

 

 

 

네 번째, head 내부에서 defer로 불러오기.

파싱과 페칭을 함께하고 모든 html이 완료되면 그제서야 js를 실행하기 때문에 가장 안전한 방법이다.