잠깐만요, HTML에도 수명주기가 있나요?-JS 튜토리얼-php.cn

잠깐만요, HTML에도 수명주기가 있나요?

HTML 네이티브 라이프사이클(Lifecycle)은 일반적으로 웹페이지를 로드하고 처리할 때 브라우저가 경험하는 이벤트 및 단계를 나타냅니다. HTML 자체는 마크업 언어이고 JavaScript와 같은 수명 주기 후크가 없지만 HTML 수명 주기 이벤트는 실제로 DOM(Document Object Model)과 JavaScript 상호 작용을 통해 관리됩니다.

HTML 파싱

브라우저가 웹페이지를 로드하면 서버로부터 HTML 파일을 받아 구문 분석을 시작합니다. 이 단계에서 브라우저는 DOM 트리(문서 객체 모델)를 생성하고 HTML을 조작 가능한 DOM 객체로 변환합니다.

엄밀히 말하면 HTML 구문 분석은 페이지 로드 프로세스의 필수 단계이지만 JavaScript를 통해 직접 캡처하거나 들을 수 없기 때문에 전통적인 의미의 "수명 주기 이벤트" 범주에 속하지 않습니다. 그러나 더 넓은 관점에서 볼 때 HTML 구문 분석은 전체 페이지 수명 주기에서 없어서는 안될 부분이므로 HTML 수명 주기에 대한 논의에서 중요한 구성 요소입니다.

이 프로세스는 브라우저 내부에서 수행되므로 개발자는 이 단계를 직접 들을 수 없습니다. 그러나 HTML 구조를 최적화하고 차단 리소스(예: JavaScript 파일)를 최소화하여 구문 분석 속도를 향상시킬 수 있습니다.

외부 리소스 로드

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

리소스 유형마다 페이지 구문 분석 및 렌더링에 영향을 미치는 고유한 로드 동작이 있습니다.

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

외부 리소스 로드는 구문 분석, 렌더링, DOMContentLoaded 및 로드와 같은 중요한 수명 주기 이벤트 트리거에 영향을 주기 때문에 전반적으로 외부 리소스 로드는 페이지 수명 주기와 밀접하게 연결되어 있습니다. 외부 리소스 로드 시간이 짧을수록 수명 주기 이벤트가 더 빠르게 트리거됩니다.

ReadyState & ReadyStateChange

ReadyState 및 ReadyStateChange는 문서 및 네트워크 요청 상태 (예 : AJAX 요청)를 추적하는 데 사용되는 두 가지 주요 브라우저 속성 및 이벤트입니다. 개발자가 웹 페이지로드 프로세스의 다양한 단계를 이해 하고이 단계에서 해당 작업을 실행하도록 도와줍니다. 문서로드 및 네트워크 요청의 맥락에서 주로 사용됩니다 (예 : xmlhttprequest).

document.readystate

문서. 준비 속성은 문서의 현재 상태를 나타내며 다른 문서로드 스테이지에 해당하는 세 가지 가능한 값이 있습니다.

로드 : 문서가 여전히로드되고 있으며 HTML은 여전히 구문 분석되고 있습니다. DOM 트리는 아직 완전히 구성되지 않았습니다. 외부 리소스 (이미지 및 스타일 시트)가로드되거나 처리되지 않았을 수 있습니다.

대화식 : 문서의 HTML이 완전히로드되고 구문 분석되었으며 DOM 트리가 구축되었습니다. 그러나 스타일 시트, 이미지 및 기타 리소스는 아직 완전히로드되지 않을 수 있습니다.

완료 : HTML, CSS, JavaScript, 이미지 및 서브 프레임을 포함한 페이지의 모든 리소스가 완전히로드 및 처리되었습니다. 페이지가 완전히 준비되었습니다.

document.readystate를 사용하여 개발자는 문서의 로딩 상태를 확인하고 다른 상태를 기반으로 해당 조치를 수행 할 수 있습니다. 예를 들면 :

ReadyStateChange 이벤트

ReadyStateChange 이벤트는 문서의 ReadyState가 변경 될 때 트리거됩니다. 개발자는 ReadyStateChange 이벤트를 듣고 다양한로드 단계에서 특정 논리를 실행할 수 있습니다. 예를 들어 :

아래는 다른 문서로드 스테이지를 추적하기 위해 Docleation.readyState 및 ReadyStateChange의 사용을 보여주는 HTML 예제입니다. 이 페이지에는 기본 HTML 요소가 포함되어 있으며 다른 ReadyState 단계에서 해당 콘텐츠 또는 정보를 표시합니다.

위 코드의 출력 :

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

로그인 후 복사

domcontentloaded 이벤트

DomContentLoaded 이벤트는 HTML 문서의로드 프로세스 중에 브라우저에서 트리거 된 주요 이벤트입니다. HTML 문서의 모든 요소가 완전히 구문 분석되고 DOM 트리가 구성되었음을 나타냅니다. 그러나 이미지, 스타일 시트 및 비디오와 같은 외부 리소스는로드가 완료되지 않았을 수 있습니다. 이것은 domcontentloaded와로드 이벤트의 주요 차이점입니다.

domcontentloaded 이벤트는 문서 개체에서 발생하며 addeventListener를 사용하여 캡처해야합니다.

DomContentLoaded 이벤트는 브라우저가 HTML 문서를 구문 분석하고 모든 DOM 노드를 생성 할 때 트리거됩니다. 그러나 외부 리소스 (예 : 이미지, 비디오, 스타일 시트 또는 글꼴 파일)가 완전히로드되어야합니다.

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

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

로그인 후 복사

페이지에 동기 JavaScript 파일이 있는 경우(예: async 또는 defer 속성이 없는 스크립트) 브라우저는 <script> 태그를 지정하고 스크립트가 실행될 때까지 기다린 다음 구문 분석을 계속하세요. 이렇게 하면 DOMContentLoaded 이벤트의 트리거가 지연됩니다.<br> </script>

document.addEventListener('readystatechange', function () {
  if (document.readyState === 'interactive') {
    // The DOM tree has been completely built; DOM manipulation is now possible
    console.log('DOM is fully parsed');
  } else if (document.readyState === 'complete') {
    // The entire page, including all resources, is fully loaded
    console.log('Page and resources are fully loaded');
  }
});

로그인 후 복사

출력 순서:

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

DOMContentLoaded 이벤트를 차단하지 않는 스크립트는 다음과 같습니다.

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

window.onload 이벤트

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

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


  
    <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>
  
  
    <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>

로그인 후 복사

window.onbeforeunload 이벤트

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

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

최신 브라우저는 맞춤 프롬프트 메시지를 표시하지 않습니다. 대신 표준화된 경고 메시지를 표시합니다. 예는 다음과 같습니다.

loading
interactive
complete

로그인 후 복사

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

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

언로드 이벤트

페이지가 완전히 언로드되면(예: 페이지가 닫히거나, 새로 고쳐지거나, 페이지에서 다른 곳으로 이동하는 경우) 언로드 이벤트가 트리거됩니다. beforeunload와 달리 unload 이벤트는 사용자가 페이지를 떠나는 것을 막을 수 없습니다. 주로 임시 데이터 삭제, 비동기 요청 취소, 메모리 해제 등 최종 정리 작업을 수행하는 데 사용됩니다.

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

언로드 이벤트의 구체적인 적용 중 하나는 페이지가 언로드되기 전에 분석 데이터를 보내는 것입니다. navigator.sendBeacon(url, data) 메소드를 사용하면 페이지 언로드를 지연시키지 않고 백그라운드에서 데이터를 보낼 수 있습니다. 예:

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

로그인 후 복사

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

요약

HTML 구문 분석은 페이지 수명 주기의 기초를 형성하지만 그 자체가 JavaScript 수신 가능 수명 주기 이벤트는 아닙니다. DOMContentLoaded 이벤트는 DOM 트리가 완전히 구성되면 트리거되는 반면, 로드 이벤트는 페이지의 모든 리소스가 완전히 로드된 후에 실행됩니다. beforeunload 이벤트는 사용자에게 페이지 외부 탐색을 확인하라는 메시지를 표시하고, unload 이벤트는 페이지 언로드 중 리소스 정리에 사용됩니다. 이러한 이벤트를 통해 개발자는 페이지 로드 및 언로드 프로세스를 제어할 수 있어 사용자 경험과 페이지 성능을 향상하는 데 도움이 됩니다.