HTML - async와 defer의 차이

script 태그에서 async와 defer의 차이

- async

비동기 다운로드 + 바로 실행
HTML 파싱이 블락됨
스크립트 실행 순서가 보장되지 않음
=> 스크립트 작업이 무겁지 않고 다른 스크립트와 독립적인 경우에 사용하면 좋음
=> 하지만 DOM을 조작하는 코드가 있다면 실행 시점에 DOM 트리가 제대로 구성되지 않을 수 있으므로 주의

- defer

비동기 다운로드 + HTML 파싱 후 실행
스크립트 순서가 보장되고 DOM 파싱이 끝나고 실행됨
=> 다운로드 시에는 비동기의 이점을 누리면서 동기적으로 실행을 처리할 수 있다는 것이 장점!

- 차이점

async는 스크립트를 다운로드됐을 때 곧바로 평가 실행!
defer는 문서(HTML)을 완전히 다 읽은 후에 실행!
async는 먼저 다운로드 된 순서대로 실행!
defer는 정의된 순서대로 실행!