[JS] defer 속성

JavaScript에서 defer 속성은 <script> 태그에 사용함

defer   속성이 적용된 스크립트는 문서가 완전히 파싱된 후에(HTML이 모두 로드된 후에) 실행되도록 함

페이지의 로딩 시간에 영향을 주지 않으면서 스크립트를 실행할 수 있는 방법

외부 스크립트가 DOM 요소에 의존하거나 수정하는 경우 유용

 

defer 속성이 있는 스크립트의 특징

• 문서 파싱 중에 다운로드: defer 속성이 있는 스크립트는 HTML을 파싱하는 동안 백그라운드에서 다운로드됨. HTML 파싱을 방해하지 않으면서도 필요한 스크립트를 미리 다운로드할 수 있게 해줌
• 문서 파싱 후 실행: 스크립트는 HTML 문서의 파싱이 완료된 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됨. 스크립트가 문서의 모든 요소에 접근할 수 있음을 보장함
• 순서 유지: 여러 개의 defer 스크립트가 있을 경우, HTML에 선언된 순서대로 실행됨. 스크립트 간의 종속성을 관리할 때 유용함