브라우저가 웹페이지를 읽을 때 과정은 아래와 같다.
- HTML파일을 읽는다.
- 이미지,폰트,CSS파일과 같은 리소스를 읽는다.
- JS를 다운받는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
</head>
<body>
<script>
// after resources (css, font, images ... 모두 다운로드 된 후 호출)
window.addEventListener('load', () => {
console.log('load!');
});
// only document (HTML이 로드되면 즉시 호출)
window.addEventListener('DOMContentLoaded', () => {
console.log('DOMcontentLoaded');
});
</script>
</body>
</html>위처럼<body> 의 가장 마지막에 스크립트를 넣는 경우, 브라우저가 DOM요소를 모두 읽어 나가는 중 스크립트를 만나면 window에 eventListner를 등록하고 리소스가 로딩되면 등록한 콜백함수가 출력된다.
위와 같은 HTML 문서의 생명주기엔 DOMContentLoaded, load 와 같은 이벤트가 관여하는데 이벤트 발생 순서에 따라 그 역할을 달리한다.
DOMContentLoaded
- 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일이나 CSS 등의 리소스를 기다리지 않으므로 페이지에 리소스가 많은 경우 더 빨리 호출된다.
- DOMContentLoaded는 DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 사용된다.
- DOMContentLoaded 이벤트는 document 객체에서 발생하므로, addEventListener를 사용해야한다.
load
- 브라우저가 HTML을 전부 읽고 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지 파일이나 CSS 등의 리소스를 모두 불러오는 것이 끝났을 때 발생한다.
- load는 이미지 사이즈를 확인할 필요가 있을 때 혹은 스타일링이 적용된 후 화면에 뿌려진 이미지 사이즈를 알고싶을 때 등 이벤트가 리소스와 관련될 때 사용한다.
- window 객체에서 실행되므로 load 이벤트는 onload 프로퍼티를 통해서도 사용할 수 있다.
결과
콘솔을 찍어보면 load보다 DOMContentLoaded 이벤트가 먼저 발생되는 것을 알 수 있다.
beforeunload
- 사용자가 페이지를 떠나기 전에 window 객체에서 발생한다.
- 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때 사용할 수 있다.
unload
- 사용자가 최종적으로 사이트를 떠날 때 window 객체에서 발생한다.
- 사용자가 최종적으로 사이트를 떠날 때, 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때 사용할 수 있다.
