TIL - 20220911

 오늘은 모던 JavaScript 튜토리얼에서 DOMContentLoaded, load, beforeunload, unload 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다.

 HTML 문서 생명주기의 세 가지 주요 이벤트는 다음과 같다.

• DomContentLoaded: 브라우저가 HTML을 전부 읽고 DOM 트리를 완성할 때, 발생한다. 이미지 파일이나 CSS 같은 기타 자원은 이 주기에서 기다리지 않는다. 이를 활용해 DOM이 준비되었을 때를 확인하고 나서 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 수 있다.
• load: 이미지, CSS 같은 외부 자원들도 모두 불러오는 것이 끝났을 때, 발생한다. 이를 활용해 이미지 사이즈, CSS 같은 외부 자원이 로드된 후이기 때문에 실제 화면에 뿌려지는 요소의 크기를 확인할 수 있다.
• beforeunload/unload: 사용자가 페이지를 떠날 때 발생한다. beforeunload는 게시글 작성과 같이, 사용자가 사이트를 떠나려하기 전에 변경되지 않은 사항을 저장했는지 확인시켜줄 수 있고 unload는 사용자가 진짜 떠나기 전에 사용자의 분석 정보를 담은 통계 자료를 전송할 때 사용할 수 있다.