HTML의 일생

**HTML 네이티브 라이프사이클(Lifecycle)**은 일반적으로 브라우저가 웹 페이지를 로드하고 처리할 때 겪는 이벤트와 단계를 의미합니다. HTML 자체는 마크업 언어이므로 JavaScript처럼 라이프사이클 훅이 없지만, HTML 라이프사이클 이벤트는 실제로 DOM(Document Object Model)과의 JavaScript 상호 작용을 통해 관리됩니다.

HTML 파싱

브라우저가 웹 페이지를 로드할 때 서버에서 HTML 파일을 받아 파싱하기 시작합니다. 이 단계에서 브라우저는 DOM 트리(Document Object Model)를 생성하고 HTML을 조작 가능한 DOM 객체로 변환합니다.

엄밀히 말하면 HTML 파싱은 페이지 로드 프로세스의 필수 단계이지만, JavaScript를 통해 직접 캡처하거나 수신할 수 없으므로 전통적인 의미의 "라이프사이클 이벤트" 범주에 속하지 않습니다. 그러나 더 넓은 관점에서 보면 HTML 파싱은 전체 페이지 라이프사이클에서 없어서는 안 될 부분이며, HTML 라이프사이클에 대한 논의에서 중요한 구성 요소입니다.

이 과정은 브라우저 내부에서 이루어지기 때문에 개발자는 이 단계를 직접 수신할 수 없습니다. 그러나 HTML 구조를 최적화하고 차단 리소스(예: JavaScript 파일)를 최소화하여 파싱 속도를 개선할 수 있습니다.

외부 리소스 로딩

브라우저가 HTML을 파싱할 때 외부 리소스를 만납니다. 리소스 유형, 로딩 방식(동기 또는 비동기) 및 우선순위에 따라 브라우저는 페이지 로딩 및 렌더링을 계속하는 방법을 결정합니다. 이 동작은 페이지의 렌더링 순서와 사용자에게 보이는 콘텐츠의 로드 시간에 직접적인 영향을 미칩니다.

다양한 리소스 유형은 페이지 파싱 및 렌더링에 영향을 미치는 고유한 로딩 동작을 가지고 있습니다.

CSS 로딩: 브라우저가 <link> 태그를 만나면 CSS 파일이 완전히 로드되고 파싱될 때까지 페이지 렌더링을 일시 중지합니다. CSS는 CSS 파일 없이는 페이지 레이아웃과 스타일을 올바르게 렌더링할 수 없기 때문에 렌더링 차단 리소스로 간주됩니다.
JavaScript 로딩: 기본적으로 브라우저가 <script> 태그를 만나면 JavaScript 파일이 로드되고 실행될 때까지 HTML 파싱을 중단합니다. 이를 동기 로딩이라고 합니다. 동기적으로 로드된 JavaScript는 HTML 파싱을 차단하여 DOMContentLoaded 및 load 이벤트의 타이밍에 영향을 미칩니다.

전반적으로 외부 리소스 로딩은 외부 리소스 로딩이 파싱, 렌더링 및 DOMContentLoaded 및 load와 같은 중요한 라이프사이클 이벤트의 트리거링에 영향을 미치기 때문에 페이지 라이프사이클과 밀접하게 관련되어 있습니다. 외부 리소스 로드 시간이 짧을수록 라이프사이클 이벤트가 더 빨리 트리거됩니다.

readyState & readystatechange

readyState 및 readystatechange는 문서 및 네트워크 요청(예: AJAX 요청)의 상태를 추적하는 데 사용되는 두 가지 주요 브라우저 속성 및 이벤트입니다. 이를 통해 개발자는 웹 페이지 로딩 프로세스의 다양한 단계를 이해하고 이러한 단계에서 해당 작업을 실행할 수 있습니다. 주로 문서 로딩 및 네트워크 요청(예: XMLHttpRequest) 컨텍스트에서 사용됩니다.

`document.readyState`

document.readyState 속성은 문서의 현재 상태를 나타내며 문서 로딩 단계에 따라 세 가지 가능한 값을 가집니다.

loading: 문서가 아직 로드 중이고 HTML이 아직 파싱 중입니다. DOM 트리가 아직 완전히 구성되지 않았습니다. 외부 리소스(예: 이미지 및 스타일시트)가 로드되거나 처리되지 않았을 수 있습니다.
interactive: 문서의 HTML이 완전히 로드되고 파싱되었으며 DOM 트리가 빌드되었습니다. 그러나 스타일시트, 이미지 및 기타 리소스는 아직 완전히 로드되지 않았을 수 있습니다.
complete: HTML, CSS, JavaScript, 이미지 및 하위 프레임을 포함한 페이지의 모든 리소스가 완전히 로드되고 처리되었습니다. 페이지가 완전히 준비되었습니다.

document.readyState를 사용하여 개발자는 문서의 로딩 상태를 확인하고 다양한 상태에 따라 해당 작업을 수행할 수 있습니다. 예를 들어:

if (document.readyState === 'complete') {
  // 페이지가 완전히 로드되었습니다. 페이지 작업 수행
}

`readystatechange` 이벤트

readystatechange 이벤트는 문서의 readyState가 변경될 때 트리거됩니다. 개발자는 readystatechange 이벤트를 수신하여 다양한 로딩 단계에서 특정 로직을 실행할 수 있습니다. 예를 들어:

document.addEventListener('readystatechange', function () {
  if (document.readyState === 'interactive') {
    // DOM 트리가 완전히 빌드되었습니다. 이제 DOM 조작이 가능합니다.
    console.log('DOM이 완전히 파싱되었습니다.');
  } else if (document.readyState === 'complete') {
    // 모든 리소스를 포함한 전체 페이지가 완전히 로드되었습니다.
    console.log('페이지 및 리소스가 완전히 로드되었습니다.');
  }
});

다음은 다양한 문서 로딩 단계를 추적하기 위해 document.readyState 및 readystatechange의 사용을 보여주는 HTML 예제입니다. 페이지에는 기본 HTML 요소가 포함되어 있으며 다양한 readyState 단계에서 해당 콘텐츠 또는 정보를 표시합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document ReadyState Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .status {
        font-size: 1.2em;
        color: #333;
        margin: 20px 0;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <script>
      function updateStatus() {
        console.log(document.readyState);

        switch (document.readyState) {
          case 'loading':
            console.log('loading');
            break;
          case 'interactive':
            console.log('interactive');
            break;
          case 'complete':
            console.log('complete');
            break;
        }
      }

      updateStatus();

      document.addEventListener('readystatechange', updateStatus);
    </script>
  </body>
</html>

위 코드의 출력:

loading
interactive
complete

DOMContentLoaded 이벤트

DOMContentLoaded 이벤트는 HTML 문서의 로딩 과정에서 브라우저에 의해 트리거되는 주요 이벤트입니다. 이는 HTML 문서의 모든 요소가 완전히 파싱되고 DOM 트리가 구성되었음을 의미합니다. 그러나 이미지, 스타일시트 및 비디오와 같은 외부 리소스는 아직 로드를 완료하지 못했을 수 있습니다. 이것이 DOMContentLoaded와 load 이벤트의 주요 차이점입니다.

DOMContentLoaded 이벤트는 document 객체에서 발생하며 addEventListener를 사용하여 캡처해야 합니다.

document.addEventListener('DOMContentLoaded', () => {});

DOMContentLoaded 이벤트는 브라우저가 HTML 문서 파싱을 완료하고 모든 DOM 노드를 생성할 때 트리거됩니다. 그러나 외부 리소스(예: 이미지, 비디오, 스타일시트 또는 글꼴 파일)가 완전히 로드될 필요는 없습니다.

예를 들어 페이지에 큰 이미지가 포함되어 있는 경우 이미지가 완전히 로드되기 전에 DOMContentLoaded 이벤트가 발생합니다. 이 시점에서 DOM 트리는 완전히 구성되었으며 개발자는 페이지의 DOM 요소를 조작하고 액세스할 수 있습니다. 다음은 예입니다.

<script type="text/javascript">
  function ready() {
    console.log('DOM 준비 완료.');

    const img = document.querySelector('#img');

    // 이 시점에서 이미지는 완전히 로드되지 않았을 수 있습니다(캐시되지 않은 경우).
    // 따라서 크기는 0x0이 됩니다.
    console.log(`이미지 크기: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener('DOMContentLoaded', ready);
</script>

<img
  id="img"
  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
/>

이 코드의 출력은 다음과 같이 나타나며, 이미지가 로드되기 전에 DOM이 완전히 파싱됩니다.

DOM 준비 완료.
이미지 크기: 0x0

페이지에 동기 JavaScript 파일이 있는 경우(즉, async 또는 defer 속성이 없는 스크립트) 브라우저는 <script> 태그를 만나면 HTML 파싱을 일시 중지하고 스크립트가 실행될 때까지 기다린 다음 파싱을 계속합니다. 이렇게 하면 DOMContentLoaded 이벤트의 트리거가 지연됩니다.

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM 준비 완료!');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script type="text/javascript">
  console.log('라이브러리 로드됨, 인라인 스크립트 실행됨');
</script>

출력 순서:

라이브러리 로드됨...
DOM 준비 완료!

DOMContentLoaded 이벤트를 차단**하지 않는 스크립트에는 다음이 포함됩니다.

async 속성이 있는 스크립트
document.createElement('script')를 사용하여 웹 페이지에 동적으로 추가된 스크립트

window.onload 이벤트

전체 페이지(스타일, 이미지 및 기타 리소스 포함)가 완전히 로드되면 window 객체에서 load 이벤트가 트리거됩니다. 이 이벤트는 onload 속성을 사용하여 캡처할 수 있습니다.

다음은 window.onload가 모든 이미지가 완전히 로드될 때까지 기다리기 때문에 이미지의 크기가 올바르게 표시되는 예입니다.

<script type="text/javascript">
  window.onload = function () {
    console.log('페이지 로드됨');

    // 이 시점에서 이미지가 완전히 로드되었습니다.
    console.log(`이미지 크기: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img
  id="img"
  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
/>

이 코드의 출력은 onload가 모든 리소스가 로드를 마칠 때까지 기다리기 때문에 이전 예와 다릅니다.

페이지 로드됨
이미지 크기: 544x184

window.onbeforeunload 이벤트

beforeunload 이벤트는 페이지가 언로드되기 직전에 트리거됩니다(예: 사용자가 다른 페이지로 이동하거나 탭을 닫거나 페이지를 새로 고침). 이 이벤트를 통해 개발자는 사용자에게 페이지를 실제로 떠날지 확인하도록 요청할 수 있습니다. 일반적으로 저장되지 않은 데이터를 저장하도록 사용자에게 상기시키거나 잠재적인 데이터 손실에 대해 경고하는 데 사용됩니다.

브라우저는 이 이벤트 동안 짧은 메시지를 표시하여 사용자가 페이지를 떠나고 싶은지 확인하도록 할 수 있습니다. 예를 들어 사용자가 저장되지 않은 양식에 콘텐츠를 입력한 경우 개발자는 beforeunload를 사용하여 실수로 페이지를 닫거나 새로 고치는 것을 방지할 수 있습니다.

최신 브라우저는 사용자 지정 프롬프트 메시지를 표시하지 않습니다. 대신 표준화된 경고 메시지를 표시합니다. 다음은 예입니다.

window.onbeforeunload = function () {
  return false;
};

사용자가 페이지를 떠나려고 하면 이 이벤트는 확인 대화 상자를 트리거하여 페이지를 떠날지 아니면 계속 머물지 묻습니다.

보안 및 사용자 경험 문제로 인해 브라우저는 대부분의 사용자 지정 메시지를 무시하고 대신 일반 대화 상자를 표시합니다. beforeunload를 과도하게 사용하면 사용자 경험이 저하될 수 있으므로 저장되지 않은 데이터와 같은 절대적으로 필요한 경우에만 사용해야 합니다.

unload 이벤트

unload 이벤트는 페이지가 완전히 언로드될 때 트리거됩니다(예: 페이지가 닫히거나 새로 고쳐지거나 페이지에서 벗어날 때). beforeunload와 달리 unload 이벤트는 사용자가 페이지를 떠나는 것을 방지할 수 없습니다. 주로 임시 데이터 지우기, 비동기 요청 취소, 메모리 해제와 같은 최종 정리 작업을 수행하는 데 사용됩니다.

unload 이벤트는 beforeunload와 달리 사용자에게 메시지를 표시할 수 없습니다. 대신 WebSocket 연결 닫기, 데이터를 로컬 저장소에 저장 또는 타이머 지우기와 같은 작업에 사용됩니다.

unload 이벤트의 한 가지 특정 응용 프로그램은 페이지가 언로드되기 전에 분석 데이터를 전송하는 것입니다. navigator.sendBeacon(url, data) 메서드를 사용하면 페이지 언로드를 지연시키지 않고 백그라운드에서 데이터를 전송할 수 있습니다. 예를 들어:

const analyticsData = {
  // 수집된 데이터가 포함된 객체
};

window.addEventListener('unload', function () {
  navigator.sendBeacon('/analytics', JSON.stringify(analyticsData));
});

sendBeacon 요청이 완료되면 브라우저가 이미 문서를 떠난 것일 수 있으므로 서버 응답을 검색할 수 없습니다(응답은 분석 목적으로 종종 비어 있음).

요약

HTML 파싱은 페이지 라이프사이클의 기초를 형성하지만 그 자체로는 JavaScript에서 수신 가능한 라이프사이클 이벤트가 아닙니다. DOMContentLoaded 이벤트는 DOM 트리가 완전히 구성될 때 트리거되는 반면 load 이벤트는 페이지의 모든 리소스가 완전히 로드된 후에 발생합니다. beforeunload 이벤트는 사용자에게 페이지에서 이동할지 확인하도록 요청하고, unload 이벤트는 페이지 언로드 중에 리소스를 정리하는 데 사용됩니다. 이러한 이벤트는 개발자에게 페이지 로딩 및 언로드 프로세스를 제어할 수 있는 기능을 제공하여 사용자 경험과 페이지 성능을 개선하는 데 도움이 됩니다.

Node.js 프로젝트 호스팅을 위한 최고의 선택, Leapcell을 소개합니다.

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

Node.js, Python, Go 또는 Rust로 개발하세요.

무제한 프로젝트를 무료로 배포

사용량에 대해서만 비용을 지불하고 요청이나 요금은 없습니다.

탁월한 비용 효율성

유휴 요금 없이 사용한 만큼만 지불합니다.
예: 25달러로 평균 응답 시간 60ms에서 694만 개의 요청을 지원합니다.

간소화된 개발자 경험

간편한 설정을 위한 직관적인 UI.
완전히 자동화된 CI/CD 파이프라인 및 GitOps 통합.
실행 가능한 인사이트를 위한 실시간 메트릭 및 로깅.

손쉬운 확장성 및 고성능

높은 동시성을 쉽게 처리할 수 있도록 자동 확장합니다.
운영 오버헤드 제로 - 구축에만 집중하세요.

설명서에서 자세히 알아보세요!

X에서 팔로우하세요: @LeapcellHQ

HTML 파싱

외부 리소스 로딩

readyState & readystatechange

`document.readyState`

`readystatechange` 이벤트

DOMContentLoaded 이벤트

window.onload 이벤트

window.onbeforeunload 이벤트

unload 이벤트

요약

Node.js 프로젝트 호스팅을 위한 최고의 선택, Leapcell을 소개합니다.

Share this article

More Posts from Leapcell

Popular Posts

HTML 파싱

외부 리소스 로딩

readyState & readystatechange

document.readyState

readystatechange 이벤트

DOMContentLoaded 이벤트

window.onload 이벤트

window.onbeforeunload 이벤트

unload 이벤트

요약

Node.js 프로젝트 호스팅을 위한 최고의 선택, Leapcell을 소개합니다.

Share this article

More Posts from Leapcell

Popular Posts

`document.readyState`

`readystatechange` 이벤트