브라우저는 웹페이지를 읽어올때 html파일을 먼저 읽은 다음에, 그에 관련된 이미지나 폰트, 필요한 리소스를 함께 다운로드 한다. 그리고 자바스크립트 파일이 있다면 그 자바스크립트 파일도 다운로드 받는데, 이 부분은 블로그 자바스크립트 defer async 문서를 참고하면 됨.
제공되어지는 이벤트
DOMContentLoaded– 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않음load– HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생beforeunload/unload– 사용자가 페이지를 떠날 때 발생
세 이벤트는 다음과 같은 상황에서 활용할 수 있음.
DOMContentLoaded– DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때load– 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음beforeunload– 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때unload– 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Window load</title>
<script src="defer_test.js" defer></script>
</head>
<body>
<script>
//only script : 즉, html로드와 DOM 트리를 완성하는 즉시 콜백함수 호출 : 페이지가 리소스가 많을 경우 효율적.
window.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded");
});
// after resources (css, images) : 즉 , css나 이미지등 모든 리소스가 다운로드가 되면 호출
window.addEventListener("load", () => {
console.log("load");
});
// result: defer test > DOMContentLoaded > load
// 즉, defer 옵션을 쓰게되면 html이 전부 파싱된 이후 contentloaded 이벤트가 발생하기 전에 호출
// 자바스크립트 파일이 이미지나 폰트 등에 대해서 뭔가 작업을 수행하지 않는 이상, DOMContentLoaded 안에서 동작을 수행하는 것이 사용자 입장에서 빠르게 볼 수 있다.
//before unload: 사용자가 페이지를 떠날 때 발생 (사용 예: 사용자가 사이트를 떠나려 할때, 변경되지 않은 사항들을 저장했는지 확인시켜 줄때)
window.addEventListener("beforeunload", () => {
console.log("beforeunloaded");
});
// resource is being unloaded : 사용자가 페이지를 떠날때 발생 (사용 예: 사용자가 진짜 떠나기전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할때)
window.addEventListener("unload", () => {
console.log("unload");
});
</script>
</body>
</html>
