Web ページはどのように読み込まれて実行されるか: 段階的に説明します。

Web ページの読み込みと実行の内訳

質問: Web の読み込みと実行のシーケンスは何ですか?ページ?

答え:

1. HTML 解析:

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

2.リソースの読み込み:

• 外部リソースが並行してダウンロードされます:

  • JavaScript (外部スクリプト)
  • CSS (外部スタイル)シート)
  • 画像

3. JavaScript の実行:

• <script> 内のインライン JavaScriptタグが実行されます。</script>
• 外部 JavaScript ファイルは、ダウンロード時に解析されて実行されます。

4. CSS の実行:

• 外部 CSS ファイルがダウンロードされ、解析されます。
• CSS ルールが DOM 要素に適用されます。

5. DOM の変更:

• $(document).ready() イベントは、DOM の準備が整った (すべてのリソースがロードされた) ときに発生します。
• 内部 JavaScript (<script> 内)タグ）が実行され、潜在的にDOM.</script>

6.リソース表示:

• 画像およびその他の外部リソースが Web ページに表示されます。

7.追加の JavaScript の実行:

• DOM の準備ができた後にロードされた外部 JavaScript ファイルは実行を継続します。

画像のダウンロード:

• abc.jpg と kkk.png は両方とも
• に表示されている画像src 属性が JavaScript コードによって更新されるため、要素は kkk.png になります。

ブラウザ実行フロー:

ロードと実行のシーケンスは次のとおりです。ブラウザによって多少異なりますが、上記の一般的なフローは変わりません。一貫性。

並列性:

CSS や画像などの一部のリソースは、HTML の解析をブロックすることなく並行して読み込むことができます。ただし、外部 JavaScript ファイルは、ダウンロードされて実行されるまで HTML の解析をブロックします。

参考:

• [ブラウザ エンジニアリング: Web の読み込みと実行]ページ](https://browser.engineering/posts/load-execute-web-page/)
• [Google Developers: JavaScript の実行順序](https://developers.google.com/web/fundamentals /primers/html-and-css/script-execution)

以上がWeb ページはどのように読み込まれて実行されるか: 段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。