브라우저는 <script> 태그를 만나면 javaScript파일을 다운로드, 파싱, 실행할 때까지 HTML 파싱을 중단한다. <body> 태그의 마지막 줄에 <script>를 사용하면 HTML 파싱이 다 완료된 상태이므로 괜찮지만
<script>를 <body> 중간에 사용할 경우 HTML 파싱을 하는 도중에 갑자기 js 파일을 읽게 되므로 오류 발생 위험이 있다.
또 html 파싱을 중단하기 때문에 실행해 렌더링 시간이 늘어난다.
기본적인 <script>를 사용할 때 렌더링 순서이다. js를 가져와 실행이 끝날때까지 html 파싱을 멈춰 화면이 출력되는 시간이 길어진다.
이 경우 생산성을 높이기 위해 async와 defer 속성을 사용해 html 파싱과 스크립트 다운로드를 병렬로 처리할 수 있다.
공통점: 두 속성 모두 자바스크립트 파일을 비동기적으로 다운로드하게 하며 그 동안 HTML 파싱은 중단되지 않는다.
차이점 :
<script async ...> : 자바스크립트 파일이 다운로드가 완료되는 즉시 실행된다. js가 실행될때 HTML 파싱은 중단된다.
여러 async스크립트가 있으면 다운로드된 순서대로 실행된다.
<script src="a.js" async>
<script src="b.js" async>
<script src="c.js" async>a.js를 다운로드하는데 3초, b.js를 다운로드하는데 2초, c.js를 다운로드하는데 1초가 걸린다면, c.js, b.js, a.js 순서로 스크립트가 실행된다.
언제 사용? : DOM에 종속성이 없는 스크립트, 스크립트 간 실행 순서가 중요하지 않은 경우에 사용
<script defer ...>: HTML 파싱이 완료된 후에 다운로드 된 자바스크립트를 실행한다. 여러 defer 스크립트가 있으면 정의된 순서대로 실행된다.
DOMContentLoaded 발생 이전에 실행해야 함을 나타내는 불리언 속성이기도 하다.
defer를 사용하지 않으면 기본적으로 true, 사용하면 false이다.
언제 사용? : DOM이 모두 생성된 후 실행되야 하는 스크립트, 스크립트 간 실행 순서가 중요한 경우 사용
참고 자료
