스크립트 로드 방식 시뮬레이터 (Async vs Defer)
script 태그의 async 및 defer 옵션이 HTML 파싱 및 스크립트 실행에 미치는 영향을 타임라인 시각화
준비 중인 도구입니다.
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
웹 개발 시 script 로드 성능 문제를 진단하기 위한 시각 교육 도구입니다. 크기 조정 슬라이더를 통해 HTML 파싱, 스크립트 다운로드 및 실행 타임라인의 블로킹 양상을 한눈에 관찰할 수 있습니다.
사용 방법
- 슬라이더를 드래그하여 HTML 파싱 시간, 스크립트 다운로드 시간, 스크립트 실행 시간을 설정합니다.
- 일반 스크립트의 배치 위치(head 내부 또는 body 최하단)에 따른 차이를 확인합니다.
- 아래 3가지 옵션(Standard, Async, Defer)에 따라 변하는 파싱 지연 그래프를 실시간으로 비교 검토합니다.
자주 묻는 질문
- async와 defer의 근본적인 차이는 무엇인가요?
- 둘 다 다운로드는 HTML 파싱과 병렬로 수행하지만, async는 다운로드가 끝나는 순간 파싱을 멈추고 실행에 들어가는 반면, defer는 HTML 파싱이 완전히 완료될 때까지 실행을 안전하게 지연(defer)시킵니다.
- 여러 스크립트 파일이 순서대로 실행되어야 할 때는 무엇을 써야 하나요?
- async는 먼저 다운로드 완료되는 순서대로 무작위 실행되므로 선후 종속성이 있는 경우 위험합니다. defer는 HTML 상에 기술된 태그 순서대로 실행이 보장되므로 라이브러리 연계 사용에 권장됩니다.