페이지 로드 이벤트(Load, beforeUnload, Unload)

HTML 문서의 생명주기엔 다음과 같은 4가지 주요 이벤트가 관여합니다.

1. DOMContentLoaded
2. load
3. beforeload
4. unload

window.onload

window 객체의 load이벤트는 스타일, 이미지 등의 리소스들이 모두 로드되었을 때 실행됩니다. load 이벤트는 onload 프로퍼티를 통해서도 사용할 수 있습니다.

    <script>
        window.onload=function(){
            alert("페이지 전체가 로드되었습니다.");
            alert(`이미지 사이즈:${img.offsetWidth}x${img.offsetHeight}`);
        };
    </script>
    <img id="img" src="/source/ch_8/Images/title.png" /> 

❗️이 코드를 실행하면 이미지가 먼저 로드된후 alert창이 나옵니다. 이와 같은 현상은 dom tree가 완성된후 발생하는 domcontentloaded 이벤트와 달리 이벤트 시점이 다릅니다.

window.onbeforeunload

사용자가 현재 페이지를 떠나 다른 페이지로 이동하려 할 때나 창을 닫으려고 할 때 beforeunload 핸들러에서 추가 확인을 요청할 수 있습니다.

window.onbeforeunload = function() {
    return false;
};

❗️이 코드를 실행하고 새로고침을 하면 창을 닫기 전에 알림 창을 띄어준다.

window.onunload

window 객체의 unload 이벤트는 사용자가 페이지를 떠날 때,즉 문서를 완전히 닫을 때 실행됩니다. unload 이벤트에선 팝업창을 닫는 것과 같은 딜레이가 없는 작업을 수행할 수 있습니다.
❗️SendBeacon는 데이터를 백그라운드에서 전송합니다. 다른 페이지로 전환시 분석 정보는 제대로 서버에 전송되지만, 딜레이가 없는 것은 바로 이 때문입니다. sendBeacon 요청이 종료된 시점엔 브라우저가 다른 페이지로 전환을 마친 상태일 확률이 높습니다. 따라서 서버 응답을 받을수 있는 방법이 없습니다. 그에 따른 해결책인 바로 fetch 메서드 입니다. fetch 메서드는 페이지를 떠난 후에도 요청이 가능하도록 해주는 플래그 keepalive를 지원합니다.