async
defer
<script defer src="https://example.com/script.js"></script>
둘 다 비동기, 명시 안하면 기본 동기.
async는 비동기 즉발.
defer는 비동기지만 HTML문서 파싱 완료 후 스크립트 실행. 즉
- 스크립트 만나는 시점에서 즉각 동기로 스크립트 로드하는게 중요하다 → 기본
- 스크립트 만나는 시점에서 최대한 빨리 로드해야 하지만
DOM파싱을 멈출 필요까지는 없다 →async - 스크립트 만나는 시점과 상관 없이 무조건
DOM파싱 끝난 후(가장 느리게) 실행돼야 한다 →defer
동기: 스크립트가 실행될때까지 이후 코드를 읽지 않고 만난 순서대로 우선 처리.
비동기: 스크립트 만나면 실행되지만 환경에 맞게 리소스를 사용해 이후 코드와 동시에 병렬처리.