今日は、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イベントを発生させます。
- ここからユーザー定義イベントなど様々なイベントを受けつけて、イベントが発生するとイベントハンドラが非同期で実行されます。
これを軽く読んだ上で、
Loadについては、DOMから、画像まで読み込んでから実行されます。→全てが読み込まれてからWindowオブジェクトに対してLoadイベントが発火する。
DOMContentLoadedについては、DOMが読み込まれてから実行されます。
コメント