로딩 이벤트

DOMContentLoaded

브라우저가 DOM트리를 완성하는 즉시 발생합니다. 외부 자원을 기다리지 않습니다.

document.addEventListener("DOMContentLoaded", ready);
// "document.onDOMContentLoaded = ..."는 동작하지 않습니다.

DOMContentLoaded를 막지 않는 예외
1. async 속성이 있는 스크립트
2. document.createElement('script')로 동적생성되고 웹페이지에 추가된 스크립트

외부 스타일시트를 불러오는 link 태그 바로 다음에 위치한 스크립트는 스타일시트가 로드된 이후에 실행됩니다.
firefox, chrome, opera의 폼 자동완성은 DOMContentLoaded에서 발생합니다.

load

DOM트리 + 외부자원까지 다 불러왔을 때 발생합니다.

<script>
  window.onload = function() { // window.addEventListener('load', (event) => {와 동일합니다.
    alert('페이지 전체가 로드되었습니다.');

    // 이번엔 이미지가 제대로 불러와 진 후에 얼럿창이 실행됩니다.
    alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

error

onload는 외부자원을 성공적으로 불러왔을 때 호출되는 이벤트라면 onerror는 다운로드 실패 시 호출되는 이벤트입니다.
무슨 에러가 발생했고 에러 코드가 무엇인지는 알 수 없습니다.
단지, 해당 외부자원이 로딩 중에 에러가 발생했다는 사실만 알 수 있습니다.

로딩한 외부자원 내부에 오류가 있는지 추적하고 싶다면 window.onerror 글러벌 핸들러를 사용할 수 있습니다.

let script = document.createElement('script');
script.src = "https://example.com/404.js"; // no such script
document.head.append(script);

script.onload = function() {
  // the script creates a helper function "_"
  alert(_); // the function is available
};

script.onerror = function() {
  alert("Error loading " + this.src); // Error loading https://example.com/404.js
};

beforeunload / unload

사용자가 페이지를 떠날때 발생합니다.
beforeunload - 사용자가 사이트를 떠나려할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때, 다른 페이지로 전환 중에 취소하고 싶은 경우.
unload - 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때.

readyState

document.readyState 의 값은 총 3가지 입니다.

• loading 문서를 불러오는 중일 때
• interactive 문서가 완전히 불러와졌을 때
• complete 문서를 비롯한 이미지 등의 리소스를 모두 불러와졌을 때

스크립트의 종류

브라우저는 html을 읽다가 script 태그를 만나면 먼저 실행합니다.
이 현상으로 인해 이슈가 생깁니다.
1. 스크립트 아래에 있는 DOM요소에 접근할 수 없습니다.
2. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버립니다.

대안
1. body 닫기 전에 script를 놓는다. -> html이 클 경우 느려진다.
2. defer 속성을 단다.
defer는 스크립트를 백그라운드에서 다운로드시킵니다. html파싱이 다 끝난 후에 스크립트가 실행됩니다.
3. async 속성을 단다. 먼저 다운로드된 스크립트가 먼저
domContentLoadkednpa