async
script의 async 속성은 html을 파싱하면서 병렬적으로 js 파일을 다운로드 받습니다.
스크립트를 비동기적으로 로드하고, 로드가 완료되면 즉시 실행합니다. 이 속성을 사용하면 다른 리소스(이미지, 스타일 시트 등)와 병렬로 다운로드되므로 페이지 로딩이 빨라질 수 있습니다. 그러나 스크립트의 실행 순서는 보장되지 않습니다. 즉, 다른 스크립트나 문서 구조에 의존하는 스크립트의 경우 문제가 발생할 수 있습니다.
요약
장점: 다운로드 하는 시간을 줄일 수 있음
단점: DOM 요소를 자바스크립트 파일 내에서 조작할 시 문제가 발생할 수 있음
<script async src="javascript.js"></script>defer
script의 defer 속성은 html의 파싱이 끝나면 js 파일을 다운로드 받습니다.
스크립트를 비동기적으로 로드하지만, 다른 리소스와 독립적으로 로드되지 않습니다. 대신 스크립트는 문서가 파싱되고 DOM이 구축된 후에 실행됩니다. 이 옵션은 스크립트의 실행을 지연시키지만, 순서는 보장됩니다. 따라서 다른 스크립트나 문서 구조에 의존하는 스크립트를 안전하게 사용할 수 있습니다.
요약
장점: 화면 렌더링을 멈추지 않고 스크립트를 실행시킬 수 있음. 실행 순서를 보장함
단점: 스크립트의 실행을 지연시킬 수 있음
<script defer src="javascript.js"></script>❗️defer 속성은 외부 스크립트에만 유효합니다.
<script>에 src가 없으면 defer 속성은 무시됩니다.
🔍 참고
https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
<script>: 스크립트 요소 - HTML: Hypertext Markup Language | MDN
HTML <script> 요소는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있습니다.
developer.mozilla.org
https://ko.javascript.info/script-async-defer
defer, async 스크립트
ko.javascript.info
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
async vs defer attributes
The async and defer attributes for the <script> element have great support now, so it’s time to learn exactly what they do!
www.growingwiththeweb.com