JavaScript~LoadとDOMContentLoadedの違い~

今日は、javascriptのLoadとDOMContentLoadedについて記事にします。

先生に質問した時に、先生の解答から調べたもでしたが、意外とブラウザでjavascriptやHTML、CSS、画像等がいつ読み込まれるのかが理解できていないと？になりました。

まず、javascriptがブラウザでどういう順番で読み込まれるのかについてです。
このリファレンスに書いてあります。

サーバにリクエストし、htmlの情報がブラウザに届いてから表示されるまで、JavaScriptはどのように処理されるか。

ブラウザがhtmlを読むと最初にWindowオブジェクトが生成されます。
windowオブジェクトは各ページまたはタブごとに生成されます。
windowオブジェクトのプロパティとしてDocumentオブジェクトが生成され、htmlの中身を解釈してDOMツリーを構築しようとします。
Documentオブジェクトには、文書の読み込み状況を示す文字列を返すreadyStateプロパティがあり、このときreadyStateプロパティの値は最初の「loading」になっています。
htmlは記述順にしたがって構文解析（パース）されて、Documentオブジェクトに要素オブジェクト（<head>、<div>などの要素）やテキストノード（ブラウザ画面上に配置して表示できる文字列、改行、空白など）が追加されていきます。
この時script要素があるとそのコードをパースし、エラーがなければそこでコードを同期実行します。
つまりJavaScriptが実行されるまでhtmlのパースは一時停止します。
htmlの中身がすべてパースされてDOMツリーの構築が完了するとdocument.readyStateプロパティ値は「interactive」になります。
ブラウザはDocumentオブジェクトに対してDOMツリーの構築完了を告げる「DOMContentLoaded」イベントを発生させます。
img要素などの外部リソース（サブリソース）を読み込みます。
すべての読み込みが完了した時点でdocument.readyStateプロパティ値は「complate」になります。
最後にブラウザはWindowオブジェクトに対してloadイベントを発生させます。
ここからユーザー定義イベントなど様々なイベントを受けつけて、イベントが発生するとイベントハンドラが非同期で実行されます。