문서가격블로그
문의하기
로그인무료로 가입하기
Back to Tech Articles

HTML의 일생

Jan 23, 2025
# HTML

Ethan Miller

Product Engineer · Leapcell

이 게시물은 English, 日本語 및 Deutsch에서도 볼 수 있습니다.
Cover of "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을 파싱할 때 외부 리소스를 만납니다. 리소스 유형, 로딩 방식(동기 또는 비동기) 및 우선순위에 따라 브라우저는 페이지 로딩 및 렌더링을 계속하는 방법을 결정합니다. 이 동작은 페이지의 렌더링 순서와 사용자에게 보이는 콘텐츠의 로드 시간에 직접적인 영향을 미칩니다.

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

  1. CSS 로딩: 브라우저가 <link> 태그를 만나면 CSS 파일이 완전히 로드되고 파싱될 때까지 페이지 렌더링을 일시 중지합니다. CSS는 CSS 파일 없이는 페이지 레이아웃과 스타일을 올바르게 렌더링할 수 없기 때문에 렌더링 차단 리소스로 간주됩니다.

  2. JavaScript 로딩: 기본적으로 브라우저가 <script> 태그를 만나면 JavaScript 파일이 로드되고 실행될 때까지 HTML 파싱을 중단합니다. 이를 동기 로딩이라고 합니다. 동기적으로 로드된 JavaScript는 HTML 파싱을 차단하여 DOMContentLoaded 및 load 이벤트의 타이밍에 영향을 미칩니다.

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

readyState & readystatechange

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

document.readyState

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

  1. loading: 문서가 아직 로드 중이고 HTML이 아직 파싱 중입니다. DOM 트리가 아직 완전히 구성되지 않았습니다. 외부 리소스(예: 이미지 및 스타일시트)가 로드되거나 처리되지 않았을 수 있습니다.
  2. interactive: 문서의 HTML이 완전히 로드되고 파싱되었으며 DOM 트리가 빌드되었습니다. 그러나 스타일시트, 이미지 및 기타 리소스는 아직 완전히 로드되지 않았을 수 있습니다.
  3. 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>

출력 순서:

  1. 라이브러리 로드됨...
  2. 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

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

다국어 지원

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

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

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

탁월한 비용 효율성

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

간소화된 개발자 경험

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

손쉬운 확장성 및 고성능

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

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

Leapcell 사용해보기

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

Share this article

HackerNews

More Posts from Leapcell

cover

Express 5.0.0: 새로운 기능 및 업데이트

cover

마스터링 플라스크: 심층 탐구

Popular Posts