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

신동환·2022년 5월 14일

js

목록 보기
16/18

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) {...});

profile
안녕하세요! Hello, World!

0개의 댓글