[Javascript] script async와 defer의 차이점

1) script를 head에 위치 시킬 때

[parsing html] -> [fetching js] -> [executing js] -> [parsing html] -page is ready-

• js파일의 크기가 크면 html 파싱하는데 시간이 오래 걸리기 때문에 좋은 방법이 아니다.

2) script를 body안에 제일 마지막 부분에 위치 시킬 때

[parsing html] -page is ready- -> [fetching html] -> [executing js]

• js파일이 fetching하고 executing하기 전에 page contents를 볼 수 있다.
• 하지만 웹이 js파일에 의존도가 높으면 의미있는 page를 볼 수가 없다.

3) script를 head안에 async속성을 포함하여 위치 시킬 때

*async is boolean type attribute

[pasing html(fetching js)] -> [executing js](fetching이 가장 빨리 된 script순서로 executing) -> [parsing html] -page is ready-

• fetching이 parsing 하는 동안 (병렬적으로) 일어나기 때문에 fetching 하는 시간을 절약할 수 있다.
• 하지만 js가 html이 parsing 하기 전에 실행되기 때문에 예를 들어 js파일에서 dom 요소를 조작하려하면 이 시점에 html에 요소들이 정리가 안되어있기 때문에 위험할 수 있다.
• html이 parsing 되기 전 js파일이 실행되어야 하기 때문에 시간이 오래 걸릴 수 있다.
• 정의된 script 순서대로 실행되는 것이 아닌 가장 먼저 fetching된 script부터 실행되기 때문에 순서의존도가 있는 js파일일 때 문제가 발생할 수 있다.(defer와의 차이점)

4) script를 head안에 defer속성을 포함하여 위치 시킬 때

[parsing html(fetching js)] -page is ready- -> [executing js]

• async와 달리 script를 모두 fetching하고 순서대로 실행하기 때문에 안전하고 효율적이다.

dream coding 강의를 듣고 공부한 내용을 정리하였습니다.
링크: https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2