async
<script src="script.js" async></script>
- async를 포함 시킴으로써 해당 스크립트를 비동기로 fetch 할 수 있다.
- 해당 스크립트는 다운로드가 되자마자 실행되기 때문에, HTML parsing 작업이 끝나기전에 실행 될 수 있다.
- 때문에, HTML parsing 작업을 잠재적으로 방해할 수 있다.
- 방해 예시)
- 만약 다운로드된 스크립트안에 직접적으로 DOM에 접근하여 특정 element를 추가/수정 하는 코드가 존재하려 하고, 해당 element가 아직 HTML parsing (drawing render tree)가 진행 중이라면 에러가 발생할 수 있다.
- 다수의 script가 async와 함께 선언되었다면, 비동기적으로 fetch하여 다운로드가 순차적으로 진행 되지 않는다.
💡 따라서, async는 DOM structure에 영향을 주지 않는 script에 설정하는것이 적절 할 것 같다.
defer
<script src="script.js" defer></script>
- defer를 포함 시킴으로써 해당 스크립트를 비동기로 fetch 할 수 있다. (async 동일)
- 다만, defer는 HTML Parsing 작업이 완료될때 까지 기다린다.
- 다수의 script가 async와 함께 선언되었다면, 비동기적으로 fetch하여 다운로드 하고 순차적으로 실행한다.
💡 따라서, defer는 비동기적으로 script를 다운로드하고 순차적으로 실행하고 싶을 때,
그리고 해당 스크립트가 DOM structure에 영향을 줄 가능성이 있는 script에 설정하는 것이 적절 할 것 같다.
그럼 왜 async를 사용?
- Faster Page Loading
- HTML parsing 작업을 기다리지 않기에 defer 보다 비교적 빠르다.