HTML에서 페이지의 구문 분석(파싱)이 모두 끝난 뒤에 스크립트를 실행하려면 defer 속성을 사용하면 됩니다.
defer 속성이 지정된 외부 스크립트는 HTML 문서 파싱을 차단하지 않고 백그라운드에서 다운로드되며, 문서 파싱이 완료된 직후(DOMContentLoaded 이벤트 발생 전)에 순서대로 실행됩니다. 덕분에 페이지 로딩 속도가 느려지지 않으면서도 DOM 요소에 안전하게 접근할 수 있습니다.
1단계: 자바스크립트 파일 추가
먼저 자바스크립트 파일을 하나 생성합니다. 여기서는 파일 이름을 new.js로 지정하겠습니다.
function sayHello() {
alert("Hello World")
}2단계: HTML에 defer 속성 적용하기
이제 HTML 코드를 작성하고 위에서 만든 스크립트를 defer 속성과 함께 연결하여 실행해 보겠습니다.
<html>
<head>
<script src = "new.js" defer></script>
</head>
<body>
<p>This is demo text.</p>
</body>
</html>참고 사항
defer 속성은 반드시 src 속성이 있는 외부 스크립트에만 사용할 수 있습니다. 인라인 스크립트에는 적용되지 않으므로 주의하세요. 또한 여러 개의 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행된다는 점도 기억해 두면 좋습니다.