1. 배경

브라우저가 Html 파싱하는 순서는 위에서 아래로 진행한다.
예를 들어 body전에 script 태그가 있다고 가정하면,

• 1. html 파싱시작
• 2. script 태그를 만나면 html 파싱 잠시 멈춤.
• 3. 스크립트 파일 다운(script fetch)
• 4. 스크립트 파일 실행
• 5. 멈춘 지점부터 파싱 시작

문제점

• 스크립트 파일이 크거나, 스트립트 실행시간이 길어지면 빈화면 시간이 길어진다.
• 이에 Html5에서 해결방법으로 제시된 것이 defer, async

참고 사항

• 기존에도 이를 해결하기 위해 onload 및 스크립트 태그위치를 body 아래에 놓는 방법으로 이를 해결하기도 했다.

2. defer

• Html 파싱과 script fetch를 동시에 진행(비동기)
• html 파싱 완료 후, 스크립트 실행
• 진행 순서는 아래와 같다.
  • 1. html 파싱시작
  • 2. script 태그를 만나면(아래 1번, 2번 동시진행=>비동기)
    • 1. html 파싱 계속진행.
    • 2. 스크립트 파일 다운(script fetch)
  • 3. Html 파싱 완료 후 스크립트 파일 실행

3. aync

• Html 파싱과 script fetch를 동시에 진행(비동기)
• Html 파싱이 완료되지 않아도, script fetch가 완료되면 스크립트 실행
• 진행 순서는 아래와 같다.
  • 1. html 파싱시작
  • 2. script 태그를 만나면(아래 1번, 2번 동시진행=>비동기)
    • 1. html 파싱 계속진행.
    • 2. 스크립트 파일 다운(script fetch)
  • 3. Html 파싱 완료전에 script 먼저 다운로드 되면
    • Html 파싱 잠시멈춤
    • script 실행
    • Html 파싱 다시 시작

4. 사용 방법

<script src="idex.js" defer></script>
<script src="idex.js" aync></script>  

5. 추천

왠만하면 defer 쓰자.