script defer/async

html은 세상 일이 늘 그렇듯 아는만큼만, 궁금한 만큼만 보인다.

처음 html을 배울 땐 이유도 모른 채로 script 삽입 코드는 늘 </body>의 바로 위에 넣는다고 하여 그대로 했다.

하지만 모든 일에는 이유가 있고 그 맥락을 알면 더 잘 기억할 수 있는 것 같다.

 

브라우저가 html을 읽다가 script를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. 

script를 마지막에 넣는 방법도 있지만 페이지 로딩이 지연될 수 있다. 

그럴때 script에 defer 나 async 를 사용할 수 있다. 

 

모던 자바스크립트 튜토리얼을 읽다가 너무 좋은 그림이 댓글로 있길래 복붙해왔다.

async	load-first order. 문서 내 순서와 상관없이 먼저 다운로드된 스크립트가 먼저 실행
defer	문서에 추가된 순으로 실행

 

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

defer, async 스크립트