[JavaScript] 문서의 로딩되는 시점 이벤트 제어하기 (ft. DOMContentLoaded, load, beforeunload, unload)

문서에 따르면 HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다고 한다.

• DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.
• load - HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생한다.
• beforeunload/unload - 사용자가 페이지를 떠날 때 발생한다.

각각의 시점 이벤트이기 때문에 당연히 이벤트를 주입해서 사용해주면 된다.

// only document
window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOMContentLoaded");
});

// after resources (css, images)
window.addEventListener("load", (event) => {
    console.log("load");
});

// before unload
window.addEventListener("beforeunload", (event) => {
    console.log("beforeunload");
});

// resource is being unloaded
window.addEventListener("unload", (event) => {
    console.log("unload");
});

DOMContentLoaded 이벤트의 경우 document에 주입해서 사용해도 상관은 없다.

 

여기서 이제 사용자가 페이지를 떠날 때 추가 확인을 요청할 수 있는데, 이는 beforeunload를 통해 제어해주면 된다.

// use addEventListener beforeunload
window.addEventListener("beforeunload", (event) => {
  // 표준에 따라 기본 동작 방지
  event.preventDefault();
  // Chrome에서는 returnValue 설정이 필요함
  event.returnValue = "";
});

가끔 페이지를 벗어날때 나오던 위와 같은 알림 창이 바로 이런 상황에서 처리를 해준 것이다.

변경사항이 있나 체크해주고 나서 returnValue 처리를 해주면 좋을 것 같다.

 

그리고 unload에서는

navigator.sendBeacond()이라는 메서드를 통해 페이지를 벗어나기 전 서버로 데이터를 보낼 수 있다.

 

하지만 이게 요즘에는 또 그다지 안정적으로 실행되는 건 아닌가 보다.

그래서 document의 상태인 visibilityState를 사용한다고 한다. 

  document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
      //navigator.sendBeacon(url, data);
    }
  });

 

각 로딩되는 시점에 따라 적절하게 사용해주면 될 것 같다.

---

참고: https://ko.javascript.info/onload-ondomcontentloaded

DOMContentLoaded, load, beforeunload, unload 이벤트

참고: https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event

DOMContentLoaded - Web API | MDN

참고: https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

Window: beforeunload 이벤트 - Web API | MDN