Web ブラウザは Web ページのコンポーネントをどのようにロードして実行するのでしょうか?

Web ページの読み込みと実行のシーケンスを理解する

ブラウザは Web ページに遭遇すると、そのさまざまなコンポーネントを読み込み、実行する一連のイベントを開始します。このプロセスは、一連のステップとして理解できます:

1. HTML 解析:

• ブラウザは HTML ドキュメントをダウンロードします。
• ブラウザは HTML の解析を開始し、ページ構造を表すドキュメント オブジェクト モデル (DOM) を作成します。

2.リソースの読み込みと実行:

• パーサーは外部リソース (CSS、JavaScript など) に遭遇すると、それらをリクエストしてダウンロードします。
• CSS Loading: CSS ファイルがダウンロードされて解析され、スタイルが DOM に適用されます。
• インライン JavaScript: <script> 内の JavaScript コード。タグが解析されて実行されます。</script>
• 外部 JavaScript: 外部 JavaScript ファイルがダウンロードされ、解析されて実行されます。

3.画像読み込み:

• で指定された画像タグがリクエストおよびダウンロードされ、DOM の一部になります。

4.ドキュメントの準備完了:

• すべてのリソースがロードされ、DOM が完了すると、document.readyState プロパティが「complete」になり、「DOMContentLoaded」イベントが発生します。

5.ドキュメント準備完了後の JavaScript の実行:

• $(document).ready() ブロック内の JavaScript コード、または DOM が完了していることに依存する JavaScript コードは、この段階で実行されます。

6.ページのレンダリング:

• ページは、DOM、CSS スタイル、画像を組み合わせてレンダリングされます。
• 要素は、その位置とスタイルに基づいて表示されます。

7.ユーザー操作:

• ページは、JavaScript イベント ハンドラーを通じて、クリックやテキストの入力などのユーザー操作に応答します。

シーケンス例:

提供されているサンプル ページのロードと実行のシーケンスは、おおよそ次のとおりです。

1. HTML 解析
2. jQuery.js のロードと解析
3. abc.js の読み込みと解析
4. abc.css の読み込みと解析
5. 内部の解析
6. 内部 JavaScript の解析
7. abc.jpg の読み込み
8. kkk.js の読み込みと解析
9. ドキュメントの準備完了
10. $( document).ready ブロック (#img の src を kkk.png に変更)
11. ページのレンダリングと表示

補足:

• リソースの読み込みは非同期で、HTML 解析と並行して行われる場合があります。
• ブラウザ固有の設定は、これらのステップの順序とタイミングに影響を与える可能性があります。
• 外部リソースがキャッシュされ、負荷に影響を与える場合があります。回数と実行順序。

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