두 속성 모두 스크립트를 비동기적으로 로드
async
1. 스크립트를 비동기적으로 다운로드
2. 다운로드 완료 시 즉시 실행
3. HTML 파싱과 병렬로 진행, 스크립트 실행 시 HTML 파싱이 잠시 중단
4. 여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행
defer
1. 스크립트를 비동기적으로 다운
2. HTML 문서 파싱이 완전히 끝난 후에 실행
3. DOMContentLoaded 이벤트 발생 직전에 실행
4. 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행
따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 스크립트는 defer를 사용, 독립적으로 실행되는 스크립트(ex - google analytics 같은 분석 도구)는 async를 사용하는것이 적절lytics 같은 분석 도구)는 async를 사용하는것이 적절.
웹 개발자 되고 시포용