Web ページの読み込みと実行シーケンス 読み込みプロセスを理解する Web ページが読み込まれると、いくつかのイベントが発生します特定の場所で発生するシーケンス: HTML ダウンロードと解析: ブラウザは、HTML ドキュメントを取得して解析することから始まります。 HTML が解析されると、ブラウザはページの構造を表すドキュメント オブジェクト モデル (DOM) を作成します。 外部リソースの読み込み: HTML の解析中に、ブラウザは外部CSS や JavaScript ファイルなどのリソース。これらのリソースは、ドキュメントの前半に表示されているものから始めて、並行してダウンロードされます。 ブロッキングと非同期読み込み: タグが見つかると、ブラウザは HTML 解析を一時停止し、JavaScript ファイルがロードされるのを待ちます。ただし、外部 CSS ファイルは非同期でロードされるため、ダウンロード中に解析を続行できます。</li> <li> <strong>CSS アプリケーション:</strong> CSS ファイルがダウンロードされると、ブラウザはそれらを解析して適用します。スタイル ルールは、すでに構築されている DOM に適用され、ページの外観に影響します。</li> <li> <strong>インライン JavaScript 実行:</strong> インライン <script>ブロックは解析されるとすぐに実行されます。これらは HTML パーサーと同じスレッドで実行され、DOM を変更できます。</li> <li> <strong>DOM Content Loaded イベント:</strong> HTML ドキュメントが完全に解析されると、DOMContentLoaded イベントがトリガーされます。これは、HTML とインライン JavaScript が実行され、DOM を操作する準備ができていることを示します。</li> <li> <strong>JavaScript 実行</strong> (外部): 外部 JavaScript ファイルは完全にロードされ、解析と適用後に実行されます。すべてのCSSの中で。 DOM と対話して、ページの動作を変更できます。</li> <li> <strong>Window Load Event:</strong> window.onload イベントは、画像や外部スクリプトなどのすべてのリソースを含むページ全体が完了したときに発生します。ロード中。通常、ページ全体を準備する必要があるタスクに使用されます。</li> </ol> <p><strong>特定の質問</strong></p> <ul> <li> <strong>$(document).ready </strong> は、HTML とインライン JavaScript が実行されたときに、DOMContentLoaded イベントがトリガーされた後に実行されます。 </li> <li> <strong>abc.jpg</strong> が最初にダウンロードされて表示されますが、JavaScript コードが実行されて src 属性が設定されると、<strong>kkk.png</strong> がダウンロードされて置き換えられます。画像を「kkk.png」に変換します。</li> </ul> <p><strong>ブラウザ違い</strong></p> <p>ブラウザが異なると、リソースの読み込みと実行の処理方法が若干異なる場合があります。たとえば、Firefox にはドメインごとの同時リクエスト数を制限する設定があり、リソースのダウンロード動作に影響を与えます。さらに、キャッシュ メカニズムとネットワークの状態が、これらのイベントのタイミングと順序に影響を与える可能性があります。</p>