Web ページのロードと実行シーケンス 概要 Web ページが要求されると、ブラウザはコンテンツをロードして実行する一連のタスク。これには、HTML ドキュメントの処理、外部リソースの取得と実行、およびページのレンダリングが含まれます。 読み込みのシーケンス HTML ドキュメント: ブラウザは HTML をダウンロードします。 インライン リソース (スクリプトとスタイル): ブラウザがインライン に遭遇すると、その解析が開始されます。 <スタイル> </li> <li> <strong>外部リソース (スクリプトおよび CSS):</strong> 外部スクリプト ファイル (<script src="...">) がダウンロードされ、解析されます。 、実行されました。外部 CSS ファイル (<link rel="stylesheet" href="...">) がダウンロードされ、ページに適用されます。</li> <li> <strong>画像とその他のコンテンツ:</strong> ブラウザーは同時にHTML ドキュメントで指定された画像やその他のリソースをダウンロードします。</li> </ol> <h3>JavaScript の実行</h3> <p><strong>インライン JavaScript:</strong> インライン JavaScript は、解析されるとすぐに実行されます。</p> <p><strong>外部 JavaScript:</strong></p> <ul> <li> <strong>ブロック:</strong> 外部スクリプトが遅延または非同期でマークされている場合、ブラウザはそれをダウンロードして実行してから、続行します。 HTML を解析します。</li> <li> <strong>ノンブロッキング:</strong> 外部スクリプトがロードとマークされている場合、ブラウザはそれをダウンロードし、HTML 解析をブロックせずに非同期に実行します。</li> </ul> <h3>CSS の実行</h3> <ul> <li>CSS は、<style> 内で見つかったときにページに適用されます。 </li> <li>ページが解析されレンダリングされた後に CSS を変更すると、ページの外観が動的に更新されます。</li> </ul> <h3>$(document).ready のタイミング</h3> <p> $(document).ready 関数は、すべての HTML 要素と外部リソースがロードされて実行されると実行されます。これにより、JavaScript コードがページの要素と安全にやり取りできるようになります。</p> <h3>Image Download</h3> <ul> <li>abc.jpg は、ページ上で初めて見つかった場合にダウンロードされます。 </li> <li>kkk.png がダウンロードされ、<img> 内の abc.jpg が置き換えられます。要素は JavaScript を使用して動的に設定されるためです。</li> </ul> <h3>ブラウザ間のバリエーション</h3> <p>ロードと実行シーケンスはブラウザごとに若干異なる場合がありますが、一般原則は同じです。</p> <h3>参考文献</h3> <ul> <li>[ブラウザ エンジニアリング ブック](https://browser.engineering/)</li> <li>[Web ページでの JavaScript の実行順序](https://developer.mozilla .org/en-US/docs/Web/HTML/Element/script)</li> <li>[ブラウザのページ ライフサイクル](https://addyosmani.com/blog/page-lifecycle-in-browsers/)</li> </ul>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
