Javascript

DOMContentLoaded, load, unload :: 마이구미

mygumi 2018. 1. 3. 13:06
반응형

이 글은 문서의 로드 시점에 관련된 이벤트들을 다뤄본다.

문서 로드 시점에 관련하여 onload 또는 jQuery 의 ready 를 접해봤을 것이다.

로드 시점에 관련된 이벤트들을 통해 관련된 의문점들을 해결해본다.

참고 링크 - http://javascript.info/onload-ondomcontentloaded


페이지 라이프사이클은 크게 3가지로 분류된다.

로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다.


  • DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때
  • load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때
  • beforeunload / unload - 페이지를 떠날 때


위 내용만으로도 DOMContentLoaded 가 load 보다 빨리 발생한다는 것을 알 수 있다.

(unload 에 대한 것들은 사용빈도가 낮기 때문에 생략하겠다.)

각 이벤트에 대한 유용한 경우는 다음과 같다.


  • DOMContentLoaded - DOM 이 준비 상태이기 때문에, DOM 노드를 제어할 수 있다.
  • load - 모든 리소스가 로드된 시점이기에, image 사이즈와 같은 것들을 얻을 수 있다.
  • beforeunload / unload - 변화에 따른 저장 여부 및 페이지 이탈 여부를 확인할 수 있다.

위와 같은 이벤트들은 익숙하지 않을 수 있다.
우리는 onload 또는 jQuery 의 ready 호출에 익숙할 것이다.

<body onload="func()">

window.onload = function () {
  // ....
}

$(document).ready(function () {
  // ....
})

jQuery의 ready 는 DOMContentLoaded 라고 보면 된다.

DOMContentLoaded 를 자주 볼 수 없었던 이유는 무엇인가?

가장 큰 이유는 ie8 이하에서 지원하지 않는다.
ie8 이하를 위한 코드를 작성하면 되지만, 당연히 코드가 길어진다는 단점이 있다.
그래도 원한다면 다음 링크를 참고하자. (http://beeker.io/jquery-document-ready-equivalent-vanilla-javascript)

일반적으로 브라우저에서 지원한다고 가정한다면, 아래와 같이 작성할 수 있다.

window.addEventListener('DOMContentLoaded', function () {
  // ....
}


관련해서 대중적으로 알려진 다른 의문점들을 확인해보자.


대부분 load 보다 ready 또는 DOMContentLoaded 를 사용하는 이유는 무엇인가?


load 는 모든 리소스를 로드해야하기 때문에 DOMContentLoaded 가 먼저 발생된 후 발생한다.

대부분 모든 리소스를 기다릴 필요가 없는 경우가 많기에, 단순히 빠른 실행을 위함이다.


관련 이벤트를 하단에 작성하는 이유는 무엇인가?


대부분 스크립트를 </body> 위에 작성하거나, 하단에 작성하는 경우가 많다.

HTML 문서를 파싱하는 과정에서 script 태그를 만난다면, DOM 구축 작업이 중단된다.

중단된 후, script 작업을 실행된 후에 다시 작업이 재실행되는 것이다.


DOMContentLoaded 이벤트가 발생하는 시점이 script 작업 완료 시간만큼 지연된다는 의미이다.

또한 상황에 따라, DOM 구축이 되지 않은 상태에서 DOM 을 가져오기 때문에, 정상적인 동작이 이루어지지 않는다.

반응형