[attribute] HTML - defer 속성 ★★★ - 페이지 파싱 완료 후 외부스크립트 실행 (= defer속성 = 디퍼속성)

1. defer 예제 - 페이지 구문분석 완료 후 스크립트 실행
2. defer 정의
3. defer 구문

defer 예제 - 페이지 구문분석 완료 후 스크립트 실행

 

<script src="hz_script.js" defer></script>

<p id="hz">Homzzang.com</p> 

 

---

PS.

 

PS1. hz_script.js 코드 

alert(document.getElementById("hz").firstChild.nodeValue);

 

PS2.

<p> 태그가 외부스크립트보다 뒤에 오는데 async 속성 사용하면 값을 불러올 수 없음.

 

defer 정의

 

「페이지 파싱(=구문분석) 완료 후 외부스크립트 실행」을 지정하는 참거짓 속성. 

 

---

 

1.

• 해당 외부스크립트 뒤에 오는 웹문서 내용의 값을 사용할 때 유용.
• defer 속성은 외부 스크립트에만 사용. (즉, src 속성 있는 경우에만 사용)

2.

외부 스크립트 실행 여러 가지 방법

• async 있는 경우 ─ 페이지 구문분석과 동시에 외부스크립트 다운되며, 스크립트 사용 가능 즉시 비동기적으로 실행.
• async 없고 defer 있는 경우 ─ 페이지 구문분석과 동시에 외부스크립트 다운되며, 페이지 구문분석 완료 시 외부스크립트 실행.
• async/defer 모두 없는 경우 ─ 외부스크립트 즉시 다운로드해 실행. (실행 완료 전까지 페이지 구문분석 차단.)

 

3. 

• async 속성 지원 태그: <script>
• IE10 이상 최신 브라우저 모두 지원.

 

defer 구문

 

<script src="myScript.js" defer></script>

 

---

[속성값]

 

없음.