매일메일 "script 태그에서 async와 defer의 차이점에 대해서 설명해주세요."

async와 defer? 🤔

공통점

두 속성 모두 스크립트를 비동기적으로 로드한다.

차이점

실행 시점에서 중요한 차이가 발생‼️

async 속성

1. 스크립트를 비동기적으로 다운로드 한다.
2. 다운로드가 완료되면 즉시 실행한다.
3. HTML 파싱과 병렬로 진행이 되지만, 스크립트 실행 시에는 HTML 파싱이 잠시 중단된다.
4. async 스크립트가 여러개 있는 경우에는 다운로드가 완료되는 순서대로 실행된다.

defer 속성

1. 스크립트를 비동기적으로 다운로드 한다.
2. HTML 문서 파싱이 완전히 끝난 후에 실행된다.
3. DOMContentLoaded 이벤트 발생 직전에 실행된다.
4. 여러 defer 스크립트가 있을 경우에는 HTML에 작성된 순서대로 실행된다.

실행 순서가 중요한 스크립트나 매인 어플리케이션의 로직을 담고 있는 스크립트의 경우에는 defer를 사용하는 것이 좋고, 독립적으로 실행되는 스크립트의 경우에는 async를 사용하는 것이 적절하다.