Javascript의 Defer vs async

스크립트는 다운로드 된 후에야 실행될 수 있다.

너무나 당연한 얘기다.

그렇기 때문에 때로는 원하는 순서대로 브라우저가 동작하지 않고

사용자 경험을 떨어뜨릴 수 있는 요인이 되기도 한다.

파싱 도중 script를 만날 때

<script>

browser는 HTML을 읽다가  <script></script> 구간을 만나면
script를 먼저 순차적으로 실행하기 위해 파싱을 멈춘다.

src 속성이 있는 외부스크립트 <script src="..."></script>를 만났을 경우도 마찬가지다.
이 경우에는 외부 스크립트를 다운받고 실행한 후에야 남은 page를 처리할 수 있다.




<script async>

파싱 도중 <script async>를 만나면
문서 파싱 + 스크립트 다운로드를 같이 진행한다.

스크립트는 백그라운드에서 다운된다.


스크립트 다운이 완료되면
파싱을 멈추고 다운받은 스크립트를 실행한다.

async의 의미답게
마치 비동기 이벤트처럼 동작한다.

다운받은 스크립트 실행이 끝나면
남은 문서를 마저 파싱한다.


돔이 100% 형성되지 않아서
dom 객체 존재하지 않는 context에서
html 객체를 참조하려고하면 오류를 raise한다.



방문자 수 카운터, 광고 블록과 같은 독립적인 script처럼
실행 순서가 중요하지 않은 경우에 적용한다.













<script defer>

defer 스크립트 또한 백그라운드에서 스크립트 다운로드를 진행하기 때문에
파싱 작업을 막지 않는다.

defer로 받은 script의 실행시점은, 
</html>을 만났을 때, 즉, 문서의 끝에 도달했을 때 실행된다.

</html> - (실행 시점)  - DOMContentLoaded

script를 실행할 때

html 요소들이 반드시 선행적으로 필요한 경우
defer를 사용한다.

defer 속성은 기본적으로 true이다.

script에 src속성이 없다면 defer 속성은 무시된다.

만약 다운로드 받는 script가 그래픽 관련 컴포넌트들이라면

1  script가 실행되기 전 페이지가 화면에 출력된다.

2. 사용자는 그래픽 관련 컴포넌트들이 준비되지 않은 화면에서
    화면을 보게 될 수 있다.