문서와 리소스의 로딩

HTML의 Document는, 

1. DOMContenLoaded

2. load

3. beforeunload

4. unload

이렇게 네가지의 이벤트로 리소스 로딩 언로딩의 시점에 이벤트를 컨트롤 할 수있습니다.

DOMContentLoaded

1. DOMContentLoaded는 document 객체를 기준으로 발생하기 때문에, addEventListener을 사용해야합니다.

2. script안에 있는 스크립트가 모두 처리된 후에 발생합니다.

2 - 1 2에대한 예외로, async 속성이 있는 스크립트는 DOMContentLoaded의 '모두 처리'의 대상에 포함이 안되기 때문에, async가 실행이 안되더라도 DOMContentLoaded는 발생할 수 있습니다.

 

load

window 객체의 load가 끝난후 실행된다.

1. DOMContentLoaded vs load

//1번케이스
document.addEventListener('DOMContentLoaded', alert('dom'))
window.onload = function() { alert('window'); };

//2번케이스
window.onload = function() { alert('window'); };
document.addEventListener('DOMContentLoaded', alert('dom'))

 1번케이스와 2번케이스 나오는 순서와 상관없이, DOMContentLoaded가 먼저나온다. 이유는 load는 외부자원과 이미지가 모두 끝났을때이지만, DOMContentLoaded는 DDOM의 로드만 끝나면 시작하기 때문이다.

beforeunload

window.onbeforeunload = function() {
  return "저장되지 않은 변경사항이 있습니다. 정말 페이지를 떠나실 건 가요?";
};

위의 예시는, https://ko.javascript.info/onload-ondomcontentloaded가 출저이다.

위의 예시를 사용해서 알 수 있는것은,

1. F5 새로고침을 누르면, return된 값이 YES, OR NO로 선택하게 창으로 뜬다.

2. 하지만, 다른 사이트로 이동하거나 창을 껏을때는 아무런 창이 안나온다

beforeunload 응용 케이스

window.addEventListener('beforeunload', () => {
  localStorage.setItem('name', 'value');
});

버튼을 누를때마다 로컬스토레이지에 저장하는 것보다, 이렇게, 페이지를 떠날때만 저장하는 것이 효율적이다.

unload

사용자가 브라우저 창을 닫거나, 페이지를 언로드(페이지 이동이라던지) 할 때 발생. beforeunload와의 차이라면, 아무래도 이동 전에 막기위한거라면 beforeunload, 이동하고나서라면 unload다의 차이이다.