[HTML] async vs defer (feat. 드림코딩 by 앨리)

HTML 내 <script> 태그 위치에 따른 렌더링 과정을 알아보자!

-  head내 script를 포함하는 경우

이미지 출처 - 드림코딩 by 앨리 유튜브

사용자가 웹사이트를 보는데 시간이 많이 소요될 수 있다.

 

-  body내 script를 포함하는 경우

이미지 출처 - 드림코딩 by 앨리 유튜브

사용자가 기본적인 html을 빨리 볼 수 있는 장점은 있지만,
만약 js에 의존적인 웹사이트인 경우 사용자가 정상적인 화면을 보기까지 오래 걸린다.

 

-  head + async 를 포함하는 경우

이미지 출처 - 드림코딩 by 앨리 유튜브

js를 다운로드 받는 시간을 절약할 수 있다.
js를 통해 조작하려는 시점에 html이 파싱되지 않으면 에러가 발생할 수 있다.
또한 js를 실행하는 동안 blocked 되기 때문에 여전히 사용자가 웹사이트를 보는데 시간이 꽤 소요될 수 있다.

-  ⭐️⭐️⭐️ head + defer 를 포함하는 경우

이미지 출처 - 드림코딩 by 앨리 유튜브

또한, 다수의 스크립트를 다운로드 받는 경우
async같은 경우 다운로드가 먼저 된 js부터 실행이 되기 때문에 순서가 중요한 js인 경우 문제가 생길 수 있다.
defer같은 경우는 html 파싱을 마친 후 선언된 순서대로 js가 실행된다.

 

 

async와 defer는 html5에서 제공하니 참고하자.

 

---

참고 영상

드림코딩 by 앨리 - 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향