HTML의 defer 속성은 외부 스크립트 파일이 페이지 렌더링을 방해하지 않도록 스크립트 실행 시점을 지연시키는 데 사용됩니다. 이 속성은 오직 외부 스크립트(src 속성이 있는 경우)에만 적용되며, 값을 따로 지정하지 않는 불리언(boolean) 속성입니다.
defer 속성의 작동 원리
defer가 설정된 스크립트는 다음과 같은 순서로 동작합니다.
1. 브라우저가 HTML을 파싱하는 동안 스크립트 파일을 병렬로 다운로드합니다.
2. HTML 문서 파싱이 완료된 후에야 스크립트가 실행됩니다.
3. 스크립트는 DOMContentLoaded 이벤트가 발생하기 전에 실행됩니다.
덕분에 스크립트 다운로드 중에도 페이지 콘텐츠가 화면에 표시될 수 있어 사용자 경험과 초기 로딩 속도가 크게 향상됩니다.
사용 예제
다음 코드는 defer 속성을 사용하는 기본적인 방법을 보여줍니다.
<!DOCTYPE html> <html> <body> <script src="defer_test.js" defer></script> <p>defer를 사용했기 때문에 외부 파일은 나중에 로드됩니다</p> </body> </html>
주요 특징 정리
- defer는 인라인 스크립트에는 효과가 없으며, 반드시 src 속성과 함께 사용해야 합니다.
- 여러 개의 defer 스크립트는 문서에 작성된 순서대로 실행됩니다.
- 스크립트가 DOM 요소에 접근해야 하는 경우, defer를 사용하면 파싱이 끝난 후 실행되므로 안전하게 DOM을 조작할 수 있습니다.
- 실행 순서가 중요하지 않고 독립적인 스크립트라면 async 속성을 대신 고려할 수 있습니다.