HTMLネイティブライフサイクル（ライフサイクル）通常、ブラウザがWebページを読み込んで処理するときに経験するイベントと段階を指します。 HTML自體はマークアップ言語であり、JavaScriptのようなライフサイクルフックがありませんが、HTMLライフサイクルイベントは、JavaScriptの相互作用とDOM（ドキュメントオブジェクトモデル）を通じて実際に管理されています。

HTML解析

ブラウザがWebページをロードすると、サーバーからHTMLファイルを受信して??解析し始めます。この段階では、ブラウザはDOMツリー（ドキュメントオブジェクトモデル）を作成し、HTMLを操作可能なDOMオブジェクトに変換します。 厳密に言えば、HTMLの解析はページの読み込みプロセスに不可欠な段階ですが、JavaScriptを介してキャプチャまたは直接聴くことができないため、従來の意味で「ライフサイクルイベント」のカテゴリに分類されません。ただし、より広い観點から見ると、HTML解析はページ全體のライフサイクルの不可欠な部分であり、HTMLライフサイクルに関する議論の重要な要素となっています。

このプロセスはブラウザの內(nèi)部であるため、開発者はこのフェーズを直接聞くことができません。ただし、HTML構(gòu)造を最適化し、ブロッキングリソース（JavaScriptファイルなど）を最小化することにより、解析速度を向上させることができます。

外部リソースのロード

ブラウザがHTMLを解析すると、外部リソースに遭遇します。リソースの種類、読み込み方法（同期または非同期）、および優(yōu)先度に応じて、ブラウザはページのロードとレンダリングを継続する方法を決定します。この動作は、ページのレンダリングシーケンスと、ユーザーが表示できるコンテンツの読み込み時間に直接影響します。

さまざまなリソースタイプには、ページの解析とレンダリングに影響する明確な負荷の動作があります。

CSSロード

：ブラウザがA＆lt; link＆gt;に遭遇したときタグ、CSSファイルが完全にロードされて解析されるまでページレンダリングを一時停止します。 CSSファイルなしではページレイアウトとスタイルが正しくレンダリングできないため、CSSはレンダリングブロッキングリソースと見なされます。

javascriptロード
1. ：デフォルトでは、ブラウザーがA＆lt; script＆gt;に遭遇するとき。タグ、JavaScriptファイルがロードされて実行されるまで、HTMLの解析を停止します。これは同期荷重と呼ばれます。同期的にロードされたJavaScriptブロックHTML解析、ドンコンテンツロードのタイミングとロードイベントのタイミングに影響します。

   全體として、外部リソースのロードは、外部リソースの読み込みが解析、レンダリング、およびドンコンテンツロードやロードなどの重要なライフサイクルイベントのトリガーに影響するため、ページライフサイクルに密接に結(jié)び付けられています。外部リソースの負荷時間が短いほど、ライフサイクルイベントが速くなります。

   準(zhǔn)備完了狀態(tài)と準(zhǔn)備完了狀態(tài)変更

   readyState と readystatechange は、ドキュメントとネットワーク リクエスト (AJAX リクエストなど) の狀態(tài)を追跡するために使用される 2 つの主要なブラウザ屬性とイベントです。これらは、開発者が Web ページ読み込みプロセスのさまざまな段階を理解し、これらの段階で対応する操作を?qū)g行するのに役立ちます。これらは主に、ドキュメントの読み込みやネットワーク リクエスト (XMLHttpRequest など) のコンテキストで使用されます。

   document.readyState

   document.readyState プロパティはドキュメントの現(xiàn)在の狀態(tài)を表し、さまざまなドキュメント読み込み段階に対応する 3 つの可能な値があります。

   1. loading: ドキュメントはまだロード中であり、HTML はまだ解析中です。 DOM ツリーはまだ完全には構(gòu)築されていません。外部リソース (畫像やスタイルシートなど) がロードまたは処理されていない可能性があります。
   2. 対話型: ドキュメントの HTML は完全にロードおよび解析され、DOM ツリーが構(gòu)築されています。ただし、スタイルシート、畫像、その他のリソースがまだ完全に読み込まれていない可能性があります。
   3. complete: HTML、CSS、JavaScript、畫像、サブフレームなど、ページ上のすべてのリソースが完全に読み込まれ、処理されました。ページの準(zhǔn)備が完了しました。

   document.readyState を使用すると、開発者はドキュメントの読み込み狀態(tài)を確認し、さまざまな狀態(tài)に基づいて対応するアクションを?qū)g行できます。例:
   

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

   Readystatechange イベント

   readystatechange イベントは、ドキュメントのreadyStateが変化するとトリガーされます。開発者は、readystatechange イベントをリッスンして、さまざまな読み込み段階で特定のロジックを?qū)g行できます。例:
   

   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');
     }
   });
   

   以下は、ドキュメントのさまざまな読み込み段階を追跡するための document.readyState と readystatechange の使用法を示す HTML の例です。このページには基本的な HTML 要素が含まれており、対応するコンテンツや情報がさまざまな ReadyState 段階で表示されます。
   

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

   上記のコードの出力:
   

   loading
   interactive
   complete
   

   DOMContentLoaded イベント

   DOMContentLoaded イベントは、HTML ドキュメントの読み込みプロセス中にブラウザによってトリガーされる重要なイベントです。これは、HTML ドキュメント內(nèi)のすべての要素が完全に解析され、DOM ツリーが構(gòu)築されたことを意味します。ただし、畫像、スタイルシート、ビデオなどの外部リソースの読み込みが完了していない可能性があります。これが DOMContentLoaded とロード イベントの主な違いです。

   DOMContentLoaded イベントはドキュメント オブジェクトで発生し、addEventListener:
   を使用してキャプチャする必要があります。

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

   ブラウザが HTML ドキュメントの解析を完了し、すべての DOM ノードを生成すると、DOMContentLoaded イベントがトリガーされます。ただし、外部リソース (畫像、ビデオ、スタイルシート、フォント ファイルなど) を完全にロードする必要はありません。

   たとえば、ページに大きな畫像が含まれている場合、畫像が完全に読み込まれる前に DOMContentLoaded イベントが発生します。この時點で、DOM ツリーは完全に構(gòu)築されており、開発者はページ上の DOM 要素を操作してアクセスできるようになります。以下に例を示します:
   

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

   ページ上に同期 JavaScript ファイル (つまり、async または defer 屬性のないスクリプト) がある場合、ブラウザは <script> に遭遇すると HTML 解析を一時停止します。タグを削除し、スクリプトが実行されるのを待ってから、解析を続行します。これにより、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');
     }
   });
   

   出力順序:

   1. ライブラリがロードされました...
   2. DOM 準(zhǔn)備完了!

   DOMContentLoaded イベントをブロックしないスクリプトには次のものが含まれます:

   • async 屬性を持つスクリプト
   • document.createElement('script') を使用して Web ページに動的に追加されたスクリプト

   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 イベントは、ページがアンロードされる直前 (例: ユーザーが別のページに移動するとき、タブを閉じるとき、またはページを更新するとき) にトリガーされます。このイベントを使用すると、開発者はユーザーに本當(dāng)にページを離れたいかどうかの確認を求めることができます。通常、未保存のデータを保存するようユーザーに通知したり、データ損失の可能性について警告したりするために使用されます。

   ブラウザでは、このイベント中に短いメッセージを表示して、ページから離れてもよいかどうかをユーザーに尋ねることができます。たとえば、ユーザーが保存されていないフォームにコンテンツを入力した場合、開発者は beforeunload を使用して、誤ってページを閉じたり更新したりすることを防ぐことができます。

   最新のブラウザではカスタム プロンプト メッセージが表示されません。代わりに、標(biāo)準(zhǔn)化された警告メッセージが表示されます。以下に例を示します:
   

   loading
   interactive
   complete
   

   ユーザーがページから離れようとすると、このイベントによって確認ダイアログがトリガーされ、ページから離れるか、ページに留まるかを?qū)い亭椁欷蓼埂?/p>

   セキュリティとユーザー エクスペリエンスに関する懸念により、ブラウザはほとんどのカスタム メッセージを無視し、代わりに汎用ダイアログを表示します。 beforeunload を使いすぎるとユーザー エクスペリエンスが低下する可能性があるため、データが保存されていない場合など、絶対に必要な場合にのみ使用してください。

   アンロードイベント

   アンロードイベントは、ページが完全にアンロードされたときにトリガーされます（たとえば、ページが閉じられたり、更新されたり、離れてナビゲートしたとき）。 beforeunloadとは異なり、アンロードイベントはユーザーがページを離れることを防ぐことはできません。主に、一時的なデータのクリア、非同期リクエストのキャンセル、メモリのリリースなど、最終的なクリーンアップタスクの実行に使用されます。

   アンロードイベントは、befusunloadとは異なり、ユーザーをプロンプトすることはできません。代わりに、WebSocket接続の閉鎖、ローカルストレージへのデータの保存、タイマーのクリアなどの操作に使用されます。

   アンロードイベントの特定のアプリケーションの1つは、ページがアンロードされる前に分析データを送信することです。 navigator.sendbeacon（url、data）メソッドを使用して、ページアンロードを遅らせることなくバックグラウンドでデータを送信できます。たとえば、

   
   まとめ

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

   html解析は、ページライフサイクルの基礎(chǔ)を形成しますが、それ自體がJavaScriptに整理できるライフサイクルイベントではありません。 DomContentLoadedイベントは、DOMツリーが完全に構(gòu)築されたときにトリガーされますが、ページ上のすべてのリソースが完全にロードされた後、ロードイベントが発射されます。 beforeunloadイベントにより、ユーザーはページからナビゲーションを確認するように求められ、アンロードイベントはページアンロード中にリソースのクリーンアップに使用されます。これらのイベントは、開発者がページの読み込みとアンロードプロセスを制御できるようにし、ユーザーエクスペリエンスとページのパフォーマンスの向上に役立ちます。

   Node.jsプロジェクトをホストするための最大の選択肢であるちょっと待って、HTML にはライフサイクルがあるのですか?です。

   ---

   ちょっと待って、HTML にはライフサイクルがあるのですか?は、Webホスティング、Asyncタスク、およびRedisの次のサーバーレスプラットフォームです。

   多言語サポート

   node.js、python、go、または錆を使用して開発します

   無制限のプロジェクトを無料でデプロイする

   使用に対してのみ支払います - リクエスト、料金なし。

   無敵のコスト効率

   イドル料金なしで従量制の支払い。

   例：25ドルは、平均60ミリ秒の応答時間で6.94百萬のリクエストをサポートします。

   合理化された開発者エクスペリエンス
   • 簡単なセットアップのための直感的なui。
   完全に自動化されたCI/CDパイプラインとGitOpsの統(tǒng)合。

   実用的な洞察のためのリアルタイムメトリックとロギング。

   楽なスケーラビリティと高性能

自動スケーリングを容易に高い並行性を処理する
2. ゼロの動作オーバーヘッド - 建物に焦點を合わせてください。
ドキュメントで詳細を調(diào)べてください！



X でフォローしてください: @ちょっと待って、HTML にはライフサイクルがあるのですか?HQ

---

ブログをお読みください

以上がちょっと待って、HTML にはライフサイクルがあるのですか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。