[JS 스터디 발표] 브라우저: 문서와 리소스 로딩

HTML 문서의 생명주기

1. DOMContentLoaded

• 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생.
  이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다 !

2. load

• 이미지, 스타일시트 등의 자원들이 모두 불러오는 것이 끝났을 때 발생.

3. beforeunload/unload

• 사용자가 페이지를 떠날 때 발생

어떻게 활용하면 좋을까 ?

DOMContentLoaded

• 이 이벤트를 다룰려면 addEventListener를 사용한다.
• 문서가 로드 되었을 때 실행된다.
• 모든 요소에 접근이 가능하다.

document.addEventListener("DOMContentLoaded", ready);

window.onload

• window 객체의 load 이벤트는 스타일, 이미지 등의 리소스들이 모두 로드되었을 때 실행

window.onunload

• 문서를 완전히 닫을 때 실행

window.onbeforeunload

• 사용자가 현재 페이지를 떠나 다른 페이지로 이동하려 할 때나 창을 닫으려고 할 때

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

defer, async 스크립트

defer

• 동기적

브라우저는 용량이 작은 것부터 다운로드가 되는데, defer를 사용하면 용량이 작은 것이 먼저 다운로드 되더라도 순차적으로 선언된 코드부터 실행해준다. 그래서

<script src="용량 큰 js" />
<script src="용량 작은 js" />

이럴 경우, 브라우저는 용량 작은 js 부터 저장하지만 실행되는 것은 용량 큰 것부터 실행된다.

async

• 비동기적

다운로드가 먼저 되는 것부터 실행된다.

참고 https://ko.javascript.info/onload-ondomcontentloaded