1. 웹페이지 생명주기 이벤트

1-0. 주요 이벤트 개괄

1. DOMContentLoaded
   1. 발생 : DOM 트리가 완성되었을 때
      1. (이미지, 스타일시트 등 기다리지 않음)
   2. 활용: DOM 준비 확인 후 인터페이스 초기화할 때
2. load
   1. 발생: HTML 문서와 **모든 외부 자원(이미지, 스타일시트 등)**이 모두 로드되었을 때
   2. 활용: 외부 자원 로드 후 스타일이 적용된 요소의 실제 크기 확인할 때
3. beforeunload
   1. 발생: 사용자가 페이지를 떠나려 할 때
   2. 활용: 사용자가 변경사항을 저장했는지 확인시켜줄 때
      1. ex) 편집 에디터 페이지에서 저장하지 않고 떠날 때 alert 띄우기
4. unload
   1. 발생: 사용자가 페이지를 완전히 떠날 때
   2. 활용: 사용자가 떠나기 전 분석 정보 전송할 때

1-1. DOMContentLoaded 이벤트

1. document 객체에서 발생
2. addEventListener로 핸들러 등록 필요 (on 프로퍼티 사용 불가)

1) DOMContentLoaded와 scripts

1. 브라우저는 <script> 태그를 만나면 DOM 트리 구성 멈추고 스크립트 실행
2. 모든 스크립트가 실행된 후에야 DOMContentLoaded 이벤트 발생
3. 예외 사항:
   • async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않음
   • 동적으로 생성된 스크립트(document.createElement('script'))는 DOMContentLoaded를 막지 않음

2) DOMContentLoaded와 styles

1. 일반적으로 외부 스타일시트는 DOMContentLoaded를 막지 않음

2. 예외: 스타일시트 다음에 위치한 스크립트는 스타일시트 로드될 때까지 실행되지 않음

   html
   복사
   <link type="text/css" rel="stylesheet" href="style.css">
   <script>
     // 스타일시트가 로드될 때까지 실행되지 않음
   </script>
   
   

3) 브라우저 내장 자동완성

1. Firefox, Chrome, Opera의 폼 자동완성은 DOMContentLoaded에서 실행
2. DOMContentLoaded가 지연되면 자동완성도 지연됨