HTMLページのライフサイクル

Question

私はHTMLページのライフサイクルを理解しようとしています。私はオンラインでそれに関する良いリソースを見つけることができません。だから、私はf12ツールを開いて、自分でいくつかの実験をしました。私はいくつかの結論を引き出したことに基づいて、誰かが私に正しいかどうか教えてください？

私の観察

1>ページが最初にHTTPを介して要求されるとHTMLスケルトンは、ブラウザによって受信されます。この時点では何も表示されません。いくつかのより多くの追加の要求は、リソース（外部のJavaScript、CSS、画像など）のために送られたHTMLスケルトンにあるものに基づいて

2>

3>それがためにHTTPステータスコードを受信するまでブラウザが待機スクリプトとCSSのリソース。

4> CSSとJavaScriptのHTTPステータスコードが受信されると、ブラウザはその間に見つかった埋め込みJavaScriptを実行して、ドキュメントの上から下に読み込みを開始します。

5>上部の埋め込みJavaScriptが下部のHTML要素を参照する場合、JavaScriptは失敗します。

6>ドキュメント全体のロードが完了すると、jqueryイベント$（document）.readyが発生します。 （つまり、JQueryを使用している場合）

7>ブラウザはスクリプトやCSS以外のリソースを待たないため、画像が表示された後にその画像が表示される可能性があります。

Answer 1

あなたはかなり正しいです。 しかし、それはコード（特に5,6,7）に依存します。たとえば、上部のJSが$(document).readyの範囲内にある場合、それは失敗しません。

第2に、Firefox F12またはChrome F12をIEより優先します。彼らははるかに詳細で開発者に優しいです。詳細については、NETタブをご覧ください。それはあなたが主に探していたものである、リソースが呼び出されて読み込まれる正確な順序を表示します。