DOMContentLoaded

DOMContentLoaded

 

우리가 웹사이트를 접속했을때 컨텐츠들이 서버로부터 내려온다. 그리고 HTML을 파싱한다. CSS, JavaScript, 이미지들을 받아와서 HTML과 CSS를 분석해서 배치를 결정하고(Layout) 렌더링 작업을 한 다음 이미지 파일을 받아와서 모든 것을 보여준다. 그 시점 중간에 JavaScript가 들어가서 code를 읽어서 위치를 바꾸면 문제가 생기게 된다. 그렇기 때문 JavaScript 파일을 만들고 나서 HTML 아래쪽에다 위치시키는 것이 일반적인 방법이다. 

 

load와 DOMContentLoaded의 차이는 크롬 개발자도구로 확인할 수 있다. 

크롬 개발자도구의 Network panel을 열어서 하단에 DOMContentLoaded, load를 확인한다.

두 개의 시간이 조금 다르다. DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그외 모든 자원들이 다 받아져서 브라우저에 렌더링(화면표시)까지 다 끝난 시점에는 Load가 발생한다.

보통 DOM Tree가 다 만들어지면 DOM APIs를 통해서 DOM에 접근할 수 있기 때문에, 대부분의 자바스크립트 코드는 DOMContentLoaded 이후에 무언가를 시작하도록 구현하는게 빠르게 동작하는 방법이라 많이 사용한다.

 

 

 

 

참고  :  https://www.boostcourse.org/web316/lecture/20141?isDesc=false

웹 프로그래밍(풀스택)