[JS] defer 과 async

모던 웹브라우저에서 돌아가는 스크립트는 HTML보다 대부분 무거움
브라우저는 HTML을 읽다가 script 태그를 만나면 스크립트를 먼저 실행해야하기 때문에 DOM생성을 멈추게 됨

1. head태그에 script작성

위에서 언급했듯이 HTML로 DOM을 생성하다가 script태그를 만나면 js부터 fetching하고 executing하게 됨으로
script의 용량에 따라 사용가자 웹을 보기까지 시간이 오래 걸리게 되는 문제가 발생하게 됨

2. body태그 끝나기 전에 script작성

head태그에 script를 작성하여 발생하는 부작용을 해결하기 위해 body태그 끝에 script를 작성하게 되면
js에 굉장히 의존적인 웹사이트를 사용자가 방문시 정상적인 화면을 보기 어려울 수도 있음

이러한 문제를 해결할 수 있는 script 속성이 defer와 async임

3. head + async 작성

HTML을 읽는 것과 병렬적으로(독립적으로) script가 fetching, executing 됨 => 다운로드 시간 절약

그렇지만, 여러 js파일들 중 먼저 다운받아진 순서대로 실행이 되기 때문에 실행순서가 중요한 프로젝트에서는 문제가 될 수 있음
또한, 원하는 DOM이 아직 정의되지 않았을 때 js가 먼저 실행될 수도 있음

4. head + defer 작성

HTML을 읽으면서 병렬적으로 js가 fetching됨 => 그 이후 페이지 세팅이 완료된 뒤 js가 executing 됨

만약, 웹사이트가 실행순서에 의존적이라면 defer을 사용하는 것이 효율적일 수 있음