defer
| topics | 200-프론트개발 |
| types | 레퍼런스 |
| tags |
Script defer 속성
HTML에서 script 태그의 defer 속성에 대한 정리
참고 자료
https://www.tcpschool.com/html-tag-attrs/script-defer
defer란
script 태그의 defer 속성은 HTML 파싱과 스크립트 다운로드를 병렬로 진행하고, HTML 파싱이 완료된 후에 스크립트를 실행한다.
사용법
<script src="script.js" defer></script>
async vs defer
| 속성 | 다운로드 | 실행 시점 | 순서 보장 |
|---|---|---|---|
| 없음 | HTML 파싱 차단 | 즉시 | O |
| async | 병렬 | 다운로드 완료 즉시 | X |
| defer | 병렬 | HTML 파싱 완료 후 | O |
언제 사용할까
- DOM 조작이 필요한 스크립트
- 실행 순서가 중요한 스크립트
- 페이지 로딩 속도 개선이 필요할 때
대부분의 경우 defer를 사용하는 것이 안전하고 효율적이다.