Web ブラウザは Web ページのリソースをどのようにロードして実行するのでしょうか?

Web ページのロードと実行シーケンスを理解する

はじめに

ユーザーが Web ページをリクエストすると、ブラウザは体系的なプロセスを経て、ページをロードしてレンダリングします。このプロセスには、HTML、CSS、JavaScript、画像などのさまざまなリソースの連続したダウンロード、解析、実行が含まれます。

読み込みと実行シーケンス

HTML 解析:

1. ブラウザは HTML ドキュメントをロードし、解析を開始します。プロセス。
2. HTML 解析により、ページの構造とコンテンツを表すドキュメント オブジェクト モデル (DOM) が作成されます。

外部リソースのダウンロード:

3. HTML の解析中に、ブラウザは CSS ファイルや JavaScript などの外部リソースを検出します
4. ブラウザは、これらのリソースの非同期ダウンロードを並行して開始します。

インライン CSS および JavaScript の実行:

5. HTML が解析され、ブラウザーがインライン CSS と JavaScript に遭遇します。
6. これらのリソースは解析中にすぐに実行されます。

CSS アプリケーション:

7. CSS ファイルがダウンロードされると、ブラウザはルールを解析し、DOM に適用します。
8. DOM 内の要素にはスタイルが設定されます。

JavaScript の実行:

9. 外部 JavaScript ファイルは、HTML 解析中に検出されるとダウンロードされ、実行されます。
10. ブラウザは、JavaScript が実行されるまで解析をブロックします。完了しました。

DOM 操作:

11. 解析が完了すると、DOM を操作できるようになります。
12. JavaScript で変更できますDOM、レイアウトとコンテンツに影響を与えるpage.

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

13. HTML 解析と外部リソースの読み込みが完了すると、ドキュメント準備完了イベントが発生します。
14. このイベント内の JavaScript コードは、ページ要素を初期化し、ユーザーを処理するために実行されます。

画像の読み込み

この例では、HTML 解析中に abc.jpg が検出されると、ダウンロードされて表示されます。 $(document).ready イベントがトリガーされると、kkk.png がダウンロードされ、画像ソースとして設定されます。

ブラウザの違い

ブラウザによって、読み込みと実行シーケンスが若干異なる場合があります。たとえば、一部のブラウザでは、リソースの読み込みを最適化するために、ドメインごとの同時リクエストの数を制限しています。

キャッシュ

キャッシュ メカニズムは、リソースの読み込みに影響します。キャッシュされたリソースはサーバーではなくストレージからロードできるため、ダウンロード時間が短縮されます。

並列実行

通常、HTML 解析、JavaScript/DOM 操作、CSS アプリケーションは別のスレッドで並列実行されます。ただし、JavaScript の実行により、スクリプトが完了するまで HTML の解析がブロックされる可能性があります。 CSS ルールは段階的に適用され、非同期レンダリングが可能になります。

参考文献

• [ブラウザ エンジニアリング ブック](https://browser.engineering/)
• [jQuery]ドキュメント](https://docs.jquery.com/Tutorials:Introducing_$(document).ready())

以上がWeb ブラウザは Web ページのリソースをどのようにロードして実行するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。