JavaScript~LoadとDOMContentLoadedの違い~

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

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

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

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

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

これを軽く読んだ上で、

Loadについては、DOMから、画像まで読み込んでから実行されます。→全てが読み込まれてからWindowオブジェクトに対してLoadイベントが発火する。
DOMContentLoadedについては、DOMが読み込まれてから実行されます。

JavaScriptでDOMを操作する方法【初心者向け】

もりけん塾
もりけん先生ブログ

コメント