페이지 생명주기와 리소스 로딩 이벤트

한눈에 보기

flowchart TB
  subgraph loading["document.readyState: loading"]
    p1["HTML 파싱"] --> p2["동기 스크립트 실행"] --> p3["defer·module 스크립트 실행"]
  end
  subgraph interactive["document.readyState: interactive"]
    e1["DOMContentLoaded (document)<br/>DOM 완성. 이미지·iframe은 아직일 수 있다"] --> e2["이미지·iframe·스타일시트 등 load"]
  end
  subgraph complete["document.readyState: complete"]
    e3["load (window)<br/>모든 리소스 완료"]
  end
  use["…사용 중…<br/>visibilitychange(hidden/visible) 탭 전환마다"]
  subgraph leave["떠날 때"]
    l1["beforeunload"] --> l2["pagehide"] --> l3["visibilitychange(hidden)"] --> l4["(unload)"]
  end
  p3 --> e1
  e2 --> e3
  e3 --> use --> l1

DOMContentLoaded

DOMContentLoaded는 document에서 일어나고 addEventListener로만 받는다. document.onDOMContentLoaded = …는 동작하지 않는다.

• 스타일시트 자체는 DOM을 바꾸지 않아 DOMContentLoaded가 기다리지 않는다. 하지만 바로 뒤에 동기 스크립트가 있으면 그 스크립트가 getComputedStyle 같은 값을 읽을 수 있어 CSS를 기다리고, DOMContentLoaded는 그 스크립트를 기다린다. 결국 CSS를 기다리게 된다.
• 브라우저의 아이디·비밀번호 자동 완성은 DOMContentLoaded 시점에 채워진다. 동기 스크립트가 길어 이 이벤트가 늦어지면 자동 완성도 늦다.
• 스크립트 배치(async·defer·module)가 이 시점에 주는 영향은 스크립트·스타일 로딩 순서에 있다.

이미 지나갔을 수 있다

문서가 다 로드된 뒤에 붙인 DOMContentLoaded 리스너는 영원히 실행되지 않는다. 언제 실행될지 모르는 코드(나중에 불러온 라이브러리)는 document.readyState를 먼저 본다.

function init() { /* … */ }
 
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init)
} else {
  init() // 이미 DOM이 있다
}

상태가 바뀔 때마다 readystatechange 이벤트도 일어나지만, 위 분기로 충분해 거의 쓰지 않는다.

페이지를 떠날 때

확인 창: beforeunload

저장하지 않은 변경이 있을 때만 리스너를 붙이고, 저장하면 뗀다.

const confirmLeave = (event) => {
  event.preventDefault()   // 확인 창을 띄우는 표준 방법
  event.returnValue = true // 옛 브라우저용
}
 
editor.addEventListener('input', () => window.addEventListener('beforeunload', confirmLeave))
saveButton.addEventListener('click', () => window.removeEventListener('beforeunload', confirmLeave))

• 확인 창의 문구는 브라우저가 정한 일반 문구다. 과거에는 반환한 문자열을 보여 줬지만 남용 때문에 지금은 바꿀 수 없다.
• 사용자가 페이지와 한 번도 상호작용하지 않았으면(스티키 활성화가 없으면) 창이 뜨지 않는다.
• beforeunload 리스너가 있으면 일부 브라우저가 페이지를 bfcache에 넣지 않는다. 늘 붙여 두지 않는 이유다.
• onbeforeunload에서 문자열이나 false를 반환하는 방식은 옛 방식이다.

마지막 데이터 보내기: visibilitychange

unload는 쓰지 않는다. 모바일에서는 앱을 전환한 뒤 앱 관리자로 브라우저를 닫으면 일어나지 않고, bfcache와 호환되지 않아 뒤로 가기를 느리게 만든다. 크롬은 기본으로 unload를 더는 실행하지 않는다.

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analytics', JSON.stringify(analyticsData))
  }
})

• navigator.sendBeacon(url, data)는 페이지가 사라져도 브라우저가 백그라운드에서 POST로 끝까지 보낸다. 응답은 받을 수 없고, 보낼 수 있는 크기에 제한(보통 64KB 안팎)이 있다.
• 헤더나 메서드를 정해야 하면 fetch(url, { method: 'POST', body, keepalive: true })를 쓴다. keepalive 요청도 크기 제한이 같다.
• 웹 바이탈 지표를 보고할 때도 같은 방식을 쓴다(웹 성능 지표와 Lighthouse). bfcache를 막는 원인 확인은 DevTools Application 패널에 있다.

숨은 페이지에서 일어나는 일

Page Visibility API(document.visibilityState, document.hidden, visibilitychange)는 페이지가 실제로 보이는지를 알려 준다. 탭을 바꾸거나 창을 최소화하거나 화면이 꺼지면 hidden이 된다. 창의 blur·focus는 다른 창으로 포커스가 갔다는 뜻일 뿐, 페이지가 가려졌다는 뜻이 아니다. <iframe>은 부모 문서의 상태를 따르고, CSS로 display: none해도 상태가 바뀌지 않는다.

브라우저는 숨은 페이지의 자원을 스스로 줄인다.

그래서 숨은 동안의 일은 브라우저에 맡기지 말고 직접 멈춘다. 캐러셀 자동 넘김, 대시보드 폴링, 영상·효과음 재생은 hidden에서 멈추고 visible에서 다시 시작한다. 타이머가 늦게 도는 원리는 타이머에 있다.

document.addEventListener('visibilitychange', () => {
  if (document.hidden) stopPolling()
  else { refreshNow(); startPolling() }
})

리소스의 load와 error

외부 src를 가진 요소(스크립트, 이미지, iframe, <link> 스타일시트 등)는 로딩 결과를 load·error 이벤트로 알린다.

const script = document.createElement('script')
script.src = 'https://cdn.example.com/lib.js'
script.onload = () => lib.init()           // 받아서 **실행까지** 끝난 뒤
script.onerror = () => showFallback()      // 404·네트워크 오류. 어떤 HTTP 오류인지는 알 수 없다
document.head.append(script)

내 코드의 의존성이라면 동적 <script> 대신 동적 import()가 Promise로 결과를 주어 더 간단하다(모듈: export와 import).

다른 출처 스크립트의 오류 정보

같은 출처 정책 때문에 다른 출처(도메인·포트·프로토콜 중 하나라도 다름)에서 받은 스크립트의 실행 오류는 window.onerror에 "Script error."와 0:0만 온다. 메시지·줄 번호·스택이 숨겨진다. 오류 수집 서비스가 정보를 얻으려면 CORS로 허락받는다.

<script crossorigin="anonymous" src="https://cdn.example.com/app.js"></script>

같은 속성은 다른 출처 이미지를 <canvas>에 그린 뒤 픽셀을 읽을 때, integrity(하위 리소스 무결성)를 검사할 때도 필요하다. CORS 자체는 AJAX와 HTTP 요청에 있다.

정리

• DOM을 다루는 초기화는 DOMContentLoaded(또는 defer·모듈 스크립트)에서, 이미 지났을 수 있으면 readyState로 분기한다.
• load는 모든 리소스를 기다리므로 꼭 필요할 때만 쓴다.
• 떠나기 전 확인은 변경이 있을 때만 beforeunload + preventDefault().
• 마지막 전송은 unload가 아니라 visibilitychange(hidden) + sendBeacon·keepalive.
• 스크립트 onload는 실행 후, onerror는 로딩 실패만 알린다. 다른 출처 스크립트의 오류를 보려면 crossorigin과 CORS 헤더가 필요하다.

관련 노트: 스크립트·스타일 로딩 순서와 점진적 렌더링, DOM 이벤트: 전파, 위임, 커스텀 이벤트, 웹 성능 지표와 Lighthouse, DevTools Application 패널, 모듈: export와 import, 이벤트 루프