Web ページはどのように実行されるか: ステップバイステップの内訳?

Web ページの実行シーケンス

Web ページの応答を受信すると、ブラウザは次の実行シーケンスを開始します。

1. HTML の読み込み

ブラウザは HTML ドキュメントをダウンロードして解析し、ドキュメント オブジェクト モデル (DOM) を構築します。

2.外部リソースの取得

ブラウザは上から下に向かって外部リソース (スクリプト、CSS、画像) を並行して読み込みます。

3. JavaScript の実行

外部 (同期): ブラウザーは外部 JavaScript ファイルをすぐにダウンロード、解析、実行し、HTML 解析をブロックします。
外部 (非同期) : 最新のブラウザではノンブロッキング読み込み手法が使用され、読み込み中に HTML 解析を継続できる場合があります。
インライン: インライン JavaScript は HTML 解析プロセス内で実行されます。

4. CSS の実行

ブラウザは、HTML 内で CSS ルールを検出すると、それをダウンロード、解析、および適用します。

5.ドキュメント準備完了イベント

すべての DOM 要素と外部リソースがロードされて解析されると、ブラウザーは「ドキュメント準備完了」イベント (通常は $(document).ready().

6.さらなる JavaScript の実行

「ドキュメント準備完了」イベントの後に実行される JavaScript コードは実行を継続します。

7.画像のダウンロード

ブラウザは、HTML の仕様に従って画像やその他のメディア リソースをダウンロードします。

特定の質問に答えるには:

ページは上から下に外部リソースを並行して読み込みます。
1. 読み込みシーケンスは: HTML ->外部リソース -> JavaScript -> CSS -> 「ドキュメント準備完了」イベント ->さらにJavaScript ->画像のダウンロード。
2. インライン JavaScript: HTML 解析中。外部 JavaScript (同期): HTML 解析をブロックします。外部 JavaScript (非同期): HTML の読み込みを続行します。
3. CSS: HTML 内で検出されたときに適用されます。
4. $(document).ready: すべての DOM 要素とリソースが読み込まれた後にトリガーされます。
5. kkk.png のみがダウンロードされ、元のファイルは置き換えられますimage.

注:

実行シーケンスは、ブラウザの設定 (並列リクエストの制限など) やキャッシュ メカニズムに応じて若干異なる場合があります。ブラウザーの読み込みおよび実行プロセスの詳細については、https://browser.engineering/ (オープンソース: https://github.com/browserengineering/book) を参照してください。

以上がWeb ページはどのように実行されるか: ステップバイステップの内訳?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。