자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async와 defer 속성이 추가되었습니다.
async와 defer 속성은 src 속성을 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있으며 scr 속성이 없는 인라인 자바스크립트에는 사용할 수 없습니다.
async와 defer 속성을 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다.
하지만 자바스크립트의 실행 시점에는 차이가 있습니다.
async 속성
<scipt async src=""></script>
HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다.
단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며 , 이때 HTML 파싱이 중단됩니다.
여러 개의 script 태그에 async 속성을 지정하면 script 태그의 순서와는 상관없이 로드가 완료된 자바스크립트 먼저 실행되므로 순서가 보장되지는 않습니다.
defer 속성
<scipt defer src=""></script>
async 속성과 마찬가지로 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다.
하지만 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후 진행됩니다.
