script태그는 일반적으로 body의 최하단에 위치하는데 이는 브라우저가 HTML 마크업을 먼저 파싱/렌더링하고, 이후에 자바스크립트 코드를 실행하게 함으로서 웹 페이지의 로딩 속도를 향상시키고, 사용자에게 빠르게 콘텐츠를 보여줄 수 있다. 또한, 자바스크립트가 HTML 요소에 의존하는 경우, 해당 요소들이 이미 파싱되어 있음을 보장할 수 있다.
<head>
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
</body>하지만 HTML5 async와 defer라는 두 가지 속성을 도입하여 스크립트의 로드와 실행 시점을 더 세밀하게 제어할 수 있게 되었다. 단, async, defer 속성은 외부 스크립트 태그 사용시에만 가능하다.
<head>
<title>Document</title>
<script src="./app.js" defer></script>
<script src="./nodependence.js" async></script>
</head>
<body>
</body>async
async 속성이 있는 script 태그는 스크립트를 병렬로 로드한다. 이는 HTML 파싱을 계속하면서 스크립트 로딩이 백그라운드에서 이루어진다는 뜻이다. 하지만 스크립트가 완전히 로드되면 그때 HTML 파싱을 잠시 중지하고 스크립트를 실행한 후 파싱을 다시 재개한다.
즉, async속성은 스크립트가 페이지 로딩에 크리티컬하지 않고, 서로에 대한 의존성이 없을 때 유용하게 사용됩니다.
defer
defer 속성이 있는 script 태그도 마찬가지로 스크립트를 병렬로 로드하지만 async 와 다르게 HTML의 파싱이 완료되고 렌더링을 시작한 후에 실행한다. 이는 스크립트의 실행 순서를 보장하면서도 HTML 파싱이 중단되지 않게 한다.
즉, defer 속성은 자바스크립트 코드들을 미리 다운로드만 해놓고 HTML의 파싱을 기다린다. 때문에 스크립트 내에서 DOM 요소에 접근해야하는 경우 유용하다.
