Web ページの読み込みと実行の内訳 質問: Web の読み込みと実行のシーケンスは何ですか?ページ? 答え: 1. HTML 解析: ブラウザは HTML ドキュメントをダウンロードして解析し、ドキュメント オブジェクト モデル (DOM) を作成します。 2.リソースの読み込み: 外部リソースが並行してダウンロードされます: JavaScript (外部スクリプト) CSS (外部スタイル)シート) 画像 3. JavaScript の実行: 内のインライン JavaScriptタグが実行されます。</li> <li>外部 JavaScript ファイルは、ダウンロード時に解析されて実行されます。</li> </ul> <p><strong>4. CSS の実行:</strong></p> <ul> <li>外部 CSS ファイルがダウンロードされ、解析されます。</li> <li>CSS ルールが DOM 要素に適用されます。</li> </ul> <p><strong> 5. DOM の変更:</strong></p> <ul> <li>$(document).ready() イベントは、DOM の準備が整った (すべてのリソースがロードされた) ときに発生します。</li> <li>内部 JavaScript (<script> 内)タグ）が実行され、潜在的にDOM.</li> </ul> <p><strong>6.リソース表示:</strong></p> <ul><li>画像およびその他の外部リソースが Web ページに表示されます。</li></ul> <p><strong>7.追加の JavaScript の実行:</strong></p> <ul><li>DOM の準備ができた後にロードされた外部 JavaScript ファイルは実行を継続します。</li></ul> <p><strong>画像のダウンロード:</strong></p> <ul> <li>abc.jpg と kkk.png は両方とも</li> <li><img> に表示されている画像src 属性が JavaScript コードによって更新されるため、要素は kkk.png になります。</li> </ul> <p><strong>ブラウザ実行フロー:</strong></p> <p>ロードと実行のシーケンスは次のとおりです。ブラウザによって多少異なりますが、上記の一般的なフローは変わりません。一貫性。</p> <p><strong>並列性:</strong></p> <p>CSS や画像などの一部のリソースは、HTML の解析をブロックすることなく並行して読み込むことができます。ただし、外部 JavaScript ファイルは、ダウンロードされて実行されるまで HTML の解析をブロックします。</p> <p><strong>参考:</strong></p> <ul> <li>[ブラウザ エンジニアリング: Web の読み込みと実行]ページ](https://browser.engineering/posts/load-execute-web-page/)</li> <li>[Google Developers: JavaScript の実行順序](https://developers.google.com/web/fundamentals /primers/html-and-css/script-execution)</li> </ul>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
