script async와 defer 차이, 실행 시점과 선택 기준까지 한 번에 정리 빠른 답 async는 다운로드가 끝나는 즉시 실행되어 HTML 파싱을 끊을 수 있습니다. defer는 문서 파싱이 끝난 뒤 선언 순서대로 실행되어 앱 초기화 코드에 안전합니다. 의존성이 없고 독립적으로 동작하는 외부 스크립트는 async가 잘 맞습니다. 실행 순서와 DOM 준비 시점이 중요하면 defer를 먼저 검토하는 것이 실무적으로 안전합니다. 목차 한눈에 비교 왜 둘 다 비동기인데 체감은 다를까 흐름으로 보기 HTML 파싱과 렌더링 사이에서 스크립트가 끼어드는 지점 async가 맞는 경우와 defer가 맞는 경우 설정 예시로 보는 배치 전략 콘솔과 DevTools로 실행 순서 확인하기 자주 놓치는 예외: inline script와 module script 선택 기준을 한 줄로 정리하면 한눈에 비교 Point 1 다운로드: async 와 defer 모두 HTML 파싱과 병렬로 다운로드를 시작할 수 있습니다. Point 2 실행 시점: async 는 다운로드가 끝나는 즉시 실행되고, defer 는 문서 파싱이 끝난 뒤 실행됩니다. Point 3 실행 순서: 여러 async 스크립트는 먼저 받아진 순서대로 실행되고, 여러 defer 스크립트는 문서에 적은 순서대로 실행됩니다. Point 4 DOM 접근 안정성: async 실행 시점에는 DOM이 아직 덜 만들어졌을 수 있지만, defer 는 문서 파싱 후라 DOM 접근이 훨씬 예측 가능합니다. Point 5 DOMContentLoaded 관계: defer 와 기본 module 스크립트는 DOMContentLoaded 전에 실행되며, 이 이벤트는 그 실행을 기다립니다. async 는 보통 그 흐름 바깥에서 실행됩니다. 왜 둘 다 비동기인데 체감은 다를까 헷갈리는 이유는 둘 다 “비동기로 로드된다”는 문장만 기억하기 쉽기 때문입니다. 하지만 실제 성능과 렌더링에 더 큰 영향을 주는 것은 다운로드 자체보다 스크립트...