window.onload() : image, style, script가 모~두 로드 되었을 때 trigger된다.
DOMContentLoaded : HTML(DOM)이 로드되었을때 발생하고, image나 css등을 기다리지 않는다.
순서
(초기값은 readyState = loading)
- 가장 먼저 window 객체가 생성. (window는 전역 객체로 웹 페이지와 탭마다 생성)
- documet객체가 window의 프로퍼티로 생성되며 DOM트리의 구축을 한다. document객체는 readyState 프로퍼티를 가진다.
3. DOM트리를 구축 중 script요소를 만나면 해당 script의 구문 분석 후 오류 발생하지 않으면 바로 그 자리에서 실행한다.
실행시 동기적으로 실행되어 html문서의 DOM트리 구축은 블로킹 된다. 오류가 발생한다면 멈추며, HTML DOM트리 구축을 중단한다.
4. script까지 모두 읽고 DOM구축이 성공한다면 readyState = interactive를 가진다.
5. 이때 웹 브라우저는 DOM트리 구축을 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.
6. img등 이미지 파일등의 외부 리소스를 읽어 들여야 한다면 이 시점에 읽는다
7. 리소스까지 모두 읽어 들인 후에는 readyState = complete 으로 바뀌고 브라우저는 Window객체를 상대로 load이벤트(onload)를 발생시킨다.
모던 자바스크립트 ( 487page )
'Javascript > DOM 관련' 카테고리의 다른 글
| img, a 태그의 CORS 문제 (0) | 2024.04.23 |
|---|---|
| [DOM API] DOM 그리고 HTMLElement (0) | 2019.12.17 |
| [JAVASCRIPT] 스크롤 거리 구하기 (2) | 2019.12.01 |
| [JAVASCRIPT] event processing (0) | 2019.12.01 |