문서와 리소스 로딩

DOMContentLoaded

- 브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생

(이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않음)

– DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용

document 객체에서 발생, 이 이벤트를 다루려면 addEventListener 사용

- HTML문서 처리중 <script>태그 만나면 DOM 트리 구성 멈추고 태그 실행 스크립트 실행이 끝난 후 에 나머지 문서 처리 

 

load - HTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는것이 끝났을떄 발생

beforeunload/ unload - 사용자가 페이즈를 떠날때 발생 

 

defer, async 스크립트

 

defer

순서: 문서에 추가된 순

브라우저는 defer속성이 있는 스크립트를 백그라운드에서 다운로드함

따라서 지연 스크립트를 다운로드 하는 도중에도 html파싱이 멈추지않는다!

defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연

외부스크립트에만 유효,  src가 없으면 defer 속성은 무시 

async

순서: load-first order 문서내 순서와 상관없이 먼저 다운로드 된 순

asyne스크립트는(비동기스크립트) 페이지와 완전히 독립적으로 동작

- async스크립트는 defer스크립트와 마찬가지로 백그라운드에서 다운로드됨.

- DOMContentLoaded 이벤트와  asyne스크립트는 서로를 기다리지않음

- 페이지 구성이 끝난 후, async스크립트 다운로딩이 끝난 경우 DOMContentLoaded 는 async 스크립트 실행전에 발생할수있음

- async 스크립트가 짧아서 페이지 구성이 끝나기 전에 다운로드 되거나 스크립트가 캐싱처리 된 경우, DOMContentLoaded는 async 스크립트 실행 후에 발생할 수도 있음

- 다른스크립트들은 async스크립트 기다리지않음, async도 마찬가지