window load는 한개가 아니다

지난번에 SPA를 직접 만드는 코딩과제를 하면서 react 컴포넌트처럼 라이프 사이클은 어떻게 만들지? 라는 고민을 잠깐 했었는데 그 연장으로 웹페이지 자체에대한 라이프사이클이 궁금해졌다.

window객체에대한 이벤트 발생이 핵심이었고, 꽤나 흥미로웠다.

load, DOMContentLoaded, defer

아래 콘솔의 순서는 어떻게 나올까?

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="script.js" defer></script>
  </head>
  <body>
  <script>

    window.addEventListener('DOMContentLoaded',()=>{
      console.log('DOMContentLoaded')
    })

    window.addEventListener('load',()=>{
      console.log('load')
    })

  </script>
  </body>
</html>

결과는 defer > DOMContentLoaded > load 이다.

load는 html에서 필요한 js, font, image 등 모든 리소스가 로딩될때 이고,

DOMContentLoaded는 html 요소만 완료된다면 호출된다.

defer은 DOMContentLoaded와 비슷한 시점에 먼저 호출된다.

unload, beforeunload

페이지를 나가기 전 호출, 나갈때 호출이 된다.

window.addEventListener('beforeunload',()=>{
  console.log('beforeunload')
})

window.addEventListener('unload',()=>{
  console.log('unload')
})

'Archive' 카테고리의 다른 글

JS 높이와 스크롤 (0)	2022.09.17
stompJS에 기여하기와 한단계 성장한 느낌 (0)	2022.09.16
JS 모듈 (0)	2022.09.04
제너레이터 (0)	2022.09.04
Promise의 5가지 API (0)	2022.09.04