DOM 렌더링 순서 (브라우저 DOM 로딩순서)

 

 

window.onload() : image, style, script가 모~두 로드 되었을 때 trigger된다.

 

DOMContentLoaded : HTML(DOM)이 로드되었을때 발생하고, image나 css등을 기다리지 않는다.

 

 

 

 

 

 

 

순서

 

 

(초기값은 readyState = loading)

 

1. 가장 먼저 window 객체가 생성. (window는 전역 객체로 웹 페이지와 탭마다 생성)

 

1. 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 )

 

 

docu94.tistory.com/37

[jQuery] $(document).ready()란? - DOM 순서

jeong-pro.tistory.com/90

웹 브라우저에서 HTML문서 렌더링 과정 (동작 순서)