[FE] 03. DOMContentLoaded, load

3. 웹 애플리케이션 개발 - DOMContentLoaded

 

* DOMContentLoaded와 load의 차이

웹사이트에 접속해서 크롬 개발자도구로 이를 확인할 수 있다.

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

=> 두 개의 시간이 조금 다르다.

 

DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그 외 모든 자원을 다 받고 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에는 Load가 발생한다.

 

이를 이해하고, 필요한 시점에 두 개의 이벤트를 사용해서 자바스크립트 실행을 할 수 있다.

보통 DOM tree가 다 만들어지면 DOM APIs를 통해서 DOM에 접근할 수 있기 때문에 실무에서 대부분의 자바스크립트코드는 DOMContentLoaded 이후에 동작하도록 구현한다. 그 방법이 로딩속도 성능에 유리하다고 생각하기 때문이다.

 

크롬 개발자도구로 확인해보기

 

 

* DOMContentLoaded 예제

document.addEventListener("DOMContentLoaded", function() {
  startSomething();
  initFoo();
  initBar();
  var el = document.querySelector("div");
});

위와 같은 방법으로 구성하면 안전하게 DOM을 제어할 수 있다.

DOMContentLoaded에 작업들을 모아서 넣어놓고, 순차적으로 실행되도록 하는 것이 좋다.

load는 window에 이벤트가 있기 때문에 window.addEventListener("load", function() { }); 로 사용한다.

 

html중간중간에 script를 추가해도 되지만 해당 DOM이 정의된 HTML코드 뒤에 작성 해야한다. 그 전에 작성하면 해당 DOM node를 찾지 못하기 때문이다.

 

아래는 정상적으로 찾아진다.

<div>a</div>
<script>document.querySelector("div")</script>

하지만 아래는 생성 전에 참조가 이루어진 형태로 null로 문제가 발생한다.

<script>document.querySelector("div")</script>
<div>a</div>

 

=> 이러한 경우에 조금 더 안전성을 높힐 수 있는 방법이 DOMContentLoaded를 사용하는 것이다!

 

 

---

* DOMContentLoaded, Load 차이점

자바스크립트에는 빠른 로딩속도를 위해 자바스크립트 구문을 나중에 따로 로드할 수 있도록 지원한다.

그 중 대표적인 것이 DOMContentLoaded, onload(load) 이다.

 

DOMContentLoaded 이벤트는 최초 HTML 문서가 완전히 로드 및 파싱되었을때 발생되고, 스타일시트나 이미지 및 서브프레임 로드가 끝나기를 기다리지 않는다.

 

load 이벤트는 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다. load 이벤트라고도 한다. 모든 페이지가 완전히 로드되었을 때 사용해야 한다.

 

---

 

[참고한 곳]

https://itun.tistory.com/510

https://webdir.tistory.com/515