JavaScript - Lifecycle DOM Events and Efficient Script Loading: defer and async

1. DOMContentLoaded

• document로 접근
• 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생하는 이벤트
• 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다

  document.addEventListener('DOMContentLoaded', function(e) {...});

2. load

• window로 접근
• 리소스와 그것에 의존하는 리소스들의 로딩이 완료될 때 실행
• 페잊 로딩이 전부 완료된 시점에서 발생하는 이벤트

  window.addEventListener('load', function(e) {...});

3. beforeunload

• winodw로 접근
• 문서와 리소스가 언로드 되기 직전에 window에서 발생
• 사용자에게 페이지를 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있음
• 확인 대화 상자를 표시가 필요할 경우 preventDefault()를 호출해야 한다 (모든 브라우저가 preventDefault()를 호출해야하는건 아님)

  window.addEventListener('beforeunload', function(e) {...});