Javascript script async vs defer

html에서는 script 태그를 이용하여 필요한 javascript를 load 할 수 있습니다.

 

브라우저에서는 html을 읽다가 <script> 태그를 만나게 되면 html을 읽는 것을 멈춥니다.

이렇게 멈추게 되면 사용자에게 페이지가 보여지는 시간이 늦어지기 때문에 좋지 않을 수 있습니다.

아래 이미지의 경우 검은 부분만큼 parsing이 이루어지지 못하므로 그만큼 화면에 노출되는 것이 지연될 것입니다.

 

 

script 태그의 경우 body의 최하단에 주곤 합니다. 이렇게 하면 parsing에 문제는 없지만 fetching 하는 시간 동안에는 화면이 동작을 하지 않게 됩니다.

 

 

script 태그에 옵션을 주어서 위와 같은 경우를 방지하고 다양한 방식으로 사용할 수 있습니다.

async와 defer 옵션을 주어서 fetching과 executing 을 제어할 수 있습니다. 

위의 두 옵션은 src 속성으로 불러올때만 적용됩니다.

 

---

Async

async 옵션입니다.

<script async src="/blahblah">

async 태그가 있으면 비동기 적으로 javascript를 백그라운드에서 다운 받습니다.

그러므로 Parsing은 멈추지 않겠죠 

대신 다운이 다 완료되면 바로 실행합니다.

 

만약 실행하는 스크립트에서 미처 그리지 못한 Dom 요소를 조작해야 한다면 에러가 발생할 수 있습니다.

domContentloaded와 상관없이 fetching 한 스크립트를 바로 실행시킵니다.

 

그래서 async 옵션은 주로  광고나 방문자 수 카운팅 같이 dom 요소와 관련이 없는 것들에 부여하여 사용하곤 합니다.

---

 

Defer

defer 옵션입니다.

<script defer src="/blahblah">

 

defer 옵션이 있는 script 태그를 만나면 비동기 적으로 스크립트를 fetching 합니다.

그러므로 parsing은 멈추지 않습니다.

 

defer에서 특이한 점은 html 에 명시된 순서대로 parsing 후에 실행을 시켜준다는 것입니다.

async는 다운로드가 완료된 순서대로 실행을 시켜주지만 Defer는 위에 먼저 등장한 순서대로 executing을 해줍니다.

 

두번째 이미지에서 만약 b -> c -> a 순으로 등장하였다면 parsing 이후에 실행도 b -> c -> a 순서대로 해줍니다.

defer는 주로 순서가 중요한 스크립트 들을 불러올때 사용하곤 합니다.

 

defer를 사용할 때 주의할 점은 Html parser는 사용자의 접근성을 위해 파싱을 하면서 단위별로 화면에 노출시켜줍니다. 

스크립트가 실행되기 전에 화면이 나오기 때문에 스크립트에서 이미지와 같은 것들을 불러올 경우 loading 이나 spinner와 같은 도구들이 추가로 필요할 수 있습니다.

 

---

 

아래 이미지는 전체적인 동작 차이 입니다.

 

 

 

 

 

 

 

 

출처 : 

https://ko.javascript.info/script-async-defer

defer, async 스크립트

 

 

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