ちょっと待って、HTML にはライフサイクルがあるのですか?-jsチュートリアル-php.cn

ちょっと待って、HTML にはライフサイクルがあるのですか?

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

HTML解析

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

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

外部リソースのロード

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

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

CSSロード

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

：デフォルトでは、ブラウザーがA＆lt; script＆gt;に遭遇するとき。タグ、JavaScriptファイルがロードされて実行されるまで、HTMLの解析を停止します。これは同期荷重と呼ばれます。同期的にロードされたJavaScriptブロックHTML解析、ドンコンテンツロードのタイミングとロードイベントのタイミングに影響します。
全体として、外部リソースのロードは、外部リソースの読み込みが解析、レンダリング、およびドンコンテンツロードやロードなどの重要なライフサイクルイベントのトリガーに影響するため、ページライフサイクルに密接に結び付けられています。外部リソースの負荷時間が短いほど、ライフサイクルイベントが速くなります。

準備完了状態と準備完了状態変更

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

document.readyState

document.readyState プロパティはドキュメントの現在の状態を表し、さまざまなドキュメント読み込み段階に対応する 3 つの可能な値があります。
1. loading: ドキュメントはまだロード中であり、HTML はまだ解析中です。 DOM ツリーはまだ完全には構築されていません。外部リソース (画像やスタイルシートなど) がロードまたは処理されていない可能性があります。
2. 対話型: ドキュメントの HTML は完全にロードおよび解析され、DOM ツリーが構築されています。ただし、スタイルシート、画像、その他のリソースがまだ完全に読み込まれていない可能性があります。
3. complete: HTML、CSS、JavaScript、画像、サブフレームなど、ページ上のすべてのリソースが完全に読み込まれ、処理されました。ページの準備が完了しました。
document.readyState を使用すると、開発者はドキュメントの読み込み状態を確認し、さまざまな状態に基づいて対応するアクションを実行できます。例:
```
if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
Readystatechange イベント

readystatechange イベントは、ドキュメントのreadyStateが変化するとトリガーされます。開発者は、readystatechange イベントをリッスンして、さまざまな読み込み段階で特定のロジックを実行できます。例:
```
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 ドキュメント内のすべての要素が完全に解析され、DOM ツリーが構築されたことを意味します。ただし、画像、スタイルシート、ビデオなどの外部リソースの読み込みが完了していない可能性があります。これが DOMContentLoaded とロードイベントの主な違いです。

DOMContentLoaded イベントはドキュメントオブジェクトで発生し、addEventListener:
を使用してキャプチャする必要があります。
```
document.addEventListener('DOMContentLoaded', () => {});
```
ログイン後にコピー
ブラウザが HTML ドキュメントの解析を完了し、すべての DOM ノードを生成すると、DOMContentLoaded イベントがトリガーされます。ただし、外部リソース (画像、ビデオ、スタイルシート、フォントファイルなど) を完全にロードする必要はありません。

たとえば、ページに大きな画像が含まれている場合、画像が完全に読み込まれる前に DOMContentLoaded イベントが発生します。この時点で、DOM ツリーは完全に構築されており、開発者はページ上の 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 準備完了!
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 イベントは、ページがアンロードされる直前 (例: ユーザーが別のページに移動するとき、タブを閉じるとき、またはページを更新するとき) にトリガーされます。このイベントを使用すると、開発者はユーザーに本当にページを離れたいかどうかの確認を求めることができます。通常、未保存のデータを保存するようユーザーに通知したり、データ損失の可能性について警告したりするために使用されます。

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

最新のブラウザではカスタムプロンプトメッセージが表示されません。代わりに、標準化された警告メッセージが表示されます。以下に例を示します:
```
loading
interactive
complete
```
ログイン後にコピー
ログイン後にコピー
ユーザーがページから離れようとすると、このイベントによって確認ダイアログがトリガーされ、ページから離れるか、ページに留まるかを尋ねられます。

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

アンロードイベント

アンロードイベントは、ページが完全にアンロードされたときにトリガーされます（たとえば、ページが閉じられたり、更新されたり、離れてナビゲートしたとき）。 beforeunloadとは異なり、アンロードイベントはユーザーがページを離れることを防ぐことはできません。主に、一時的なデータのクリア、非同期リクエストのキャンセル、メモリのリリースなど、最終的なクリーンアップタスクの実行に使用されます。
アンロードイベントは、befusunloadとは異なり、ユーザーをプロンプトすることはできません。代わりに、WebSocket接続の閉鎖、ローカルストレージへのデータの保存、タイマーのクリアなどの操作に使用されます。
アンロードイベントの特定のアプリケーションの1つは、ページがアンロードされる前に分析データを送信することです。 navigator.sendbeacon（url、data）メソッドを使用して、ページアンロードを遅らせることなくバックグラウンドでデータを送信できます。たとえば、

まとめ
```
if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
html解析は、ページライフサイクルの基礎を形成しますが、それ自体がJavaScriptに整理できるライフサイクルイベントではありません。 DomContentLoadedイベントは、DOMツリーが完全に構築されたときにトリガーされますが、ページ上のすべてのリソースが完全にロードされた後、ロードイベントが発射されます。 beforeunloadイベントにより、ユーザーはページからナビゲーションを確認するように求められ、アンロードイベントはページアンロード中にリソースのクリーンアップに使用されます。これらのイベントは、開発者がページの読み込みとアンロードプロセスを制御できるようにし、ユーザーエクスペリエンスとページのパフォーマンスの向上に役立ちます。

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

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

多言語サポート

node.js、python、go、または錆を使用して開発します
無制限のプロジェクトを無料でデプロイする
無敵のコスト効率
例：25ドルは、平均60ミリ秒の応答時間で6.94百万のリクエストをサポートします。
- 簡単なセットアップのための直感的なui。
完全に自動化されたCI/CDパイプラインとGitOpsの統合。
実用的な洞察のためのリアルタイムメトリックとロギング。
ゼロの動作オーバーヘッド - 建物に焦点を合わせてください。