[JavaScript] Script 태그의 defer, async

🥕 Script 태그

DOM이 생성될 때, Script 태그를 만나면 DOM 생성을 멈추고 Script를 실행한다.

src 속성을 포함한 외부 스크립트를 만났을 때에도 마찬가지이다.
해당 스크립트를 다운 받고 실행할 때 까지 Script 태그 아래에 선언된 DOM 요소들은 대기해야 한다.

여기서 DOM 생성을 중단하지 않고, 스크립트를 동시에 내려받게 할 수 있는 방법으로
defer, async가 있다.

🥕 defer

defer 속성은 스크립트를 '백그라운드'에서 다운로드한다.

그러므로 HTML 파싱(DOM 생성)을 중단시키지 않으며 defer 속성이 있는 스크립트의 다운로드가 끝나더라도
DOM 생성을 마칠 때 까지 지연된 후 스크립트를 실행한다.
->DOM이 모두 ready된 다음에 실행된다.

유의할 점으로는 DOM 준비 이후 바로 스크립트를 실행하며, 이 시점은 DOMContentLoaded 이벤트가 발생하기 전이다.

그리고 defer 스크립트는 일반 스크립트와 마찬가지로,
순서를 지키며 실행되므로 앞선 script가 무겁고 뒤의 스크립트가 가볍다고 해도 순서대로 실행된다.

🥕 async

async 속성은 페이지 작업과 완전히 독립적으로 동작한다.
-> Async는 아무 것도 기다리지 않고, 아무 것도 Async를 기다리지 않는다. (= 로드 및 실행이 완전히 독립적이다)

defer와 마찬가지로, async 속성을 통하면 스크립트는 백그라운드에서 다운로드된다.
그러나 스크립트는 다운로드 즉시 실행되며, 스크립트 실행 도중에는 DOM 생성을 중단한다.
다운로드 즉시 실행되기 때문에, DOMContentLoaded 이벤트 이전의 실행을 보장하지 않는다.
심지어는 DOMContentLoaded 이후에 스크립트가 실행될 수도 있다.

마지막으로 async는 '다운로드 완료 순서'에 의존하므로,
defer가 선언된 순서를 지키며 스크립트를 실행 했던 것과는 달리, async는 선언된 순서와 실행 순서가 무관하다.

이를 'load first order' 라고 부른다.
async 스크립트를 비동기 스크립트라고 하는데, 이는 각각 스크립트가 독립적인 역할을 하는 광고 등의 서드파티 스크립트 등을
현재 개발중인 스크립트에 통합할 때 유용하다고 한다.

async 스크립트는 다른 스크립트에 의존하지 않는 독립성을 보장하기 때문이다.

async, defer 스크립트는 다운로드 시 페이지 렌더링(DOM 생성)을 막지 않는다.
그래서 적절한 async, defer 사용은 사용자의 UX를 향상시킬 수 있다.

defer 속성은 보통 DOM 전체가 필요한 스크립트나 실행 순서가 중요할 때(B 스크립트는 A 스크립트 이후에 실행되어야 할 때) 적용한다.
async 속성은 방문자 수 카운터 혹은 광고 스크립트 등과 같이 독립적으로 작동하는 스크립트에 적용한다.
이와 같이 DOM 파싱을 막지 않는 옵션을 사용할 때는, 페이지가 출력 되었으나, 스크립트가 실행되지 않은 시점을 조심해야 한다.
그러므로, 로딩 스피너를 사용하고 비즈니스 로직을 처리해야 하는 버튼등을 비활성화 시키는 등의 추가 조치를 통해
사용자에게 아직 페이지가 완전히 불러와지지 않았다는 것을 시각적으로 보여줄 수 있어야 한다.