【JS】イベントリスナー’ DOMContentLoaded ‘と’ load ‘の違いを解説

こんにちは。
今回はJavaScript（以下JS）のロード系？のイベントリスナーについて書きたいと思います。

・DOMContentLoaded
・load

これらのイベントリスナーはJSを学習しはじめのときには全く気にしていなかったのですが、学習を進める上で大きな違いがあるのを知ったのでシェアしようとおもいます。

DOMContentLoadedイベント

「DOMContentLoaded」はDOMの読み込みが完了してからfunctionが実行される。というものです。

document.addEventListener('DOMContentLoaded',
  function(){
    console.log('DOMツリーの解析が終わりました。');
  }
);

上記の場合DOMの読み込みが終わってから、「DOMツリーの解析が終わりました。」と出てきます。

<script>タグの読み込みは基本HTMLの</body>直前に記述しますよね？

Webの仕組み上、ページの読み込みはHTMLファイルの上から順番に読み込まれます。

HTMLの下部に入れておくと、<script>タグが読み込まれるまでにすでにDOMの読み込みが完了します。

したがって、
<script>をページ下部に書いているなら「DOMContentLoaded」は不要となります。
繰り返しになりますが、JSが読み込まれるときにはDOM読み込みが完了しているからです。

<script>をヘッドの中に書いている場合は、必要になるでしょう。

<script>をヘッド内に記述しており、JS内にDOMを操作する記述が書かれている場合は、イベントリスナーで「DOMContentLoaded」を使っていないと、エラーが出る可能性があるからです。

理由は、DOM読み込みが終わっていないのにDOM操作をしようとするからです。

JS：「さぁ、DOMを操るぞー！、、あれ？DOMが見つからない,,,??」
HTML：「だったまだDOMを全部読み切ってないもん。」

みたいな感じです。

しかし、ヘッドに<script> タグを入れてしまうとJSの読み込みが完全に完了しないと、HTMLの読み込みも始まりません。

したがって長いJSの記述をしているとページ表示に時間がかかってしまいますのでユーザーの離脱に繋がる可能性があります。

loadイベント

「load」はDOM読み込みだけではなく、画像やCSS等も全部読み込みが完了してからfunctionを実行します。
したがって、「DOMContentLoaded」の方が「load」よりイベントの発火タイミングが早いです。

window.addEventListener('load', function(){
  console.log('ページの読み込みが完了しました。');
})；

こうすると、DOMツリーの読み込みが終わってかつ、画像も完全に読み込みが終わってから「ページの読み込みが完了しました。」と表示されます。

「DOMContentLoaded」を使うと、画像が完全に読み込まれてなくても<img>タグ（DOM）の読み込みが終われば発火します。

では実際に比較してみましょう。

window.addEventListener('load', function(){
  console.log('ページの読み込みが完了しました。');
})；

document.addEventListener('DOMContentLoaded',
  function(e){
    console.log('DOMツリーの解析が終わりました。');
  }
);

このように記述すると、本来は上から順番に実行されるので、
①「ページの読み込みが完了しました。」
②「DOMツリーの解析が終わりました。」
の順に表示されるかと思いきや、

ページの読み込み完了の方がDOM解析より時間がかかるので、
①「DOMツリーの解析が終わりました。」
②「ページの読み込みが完了しました。」
の順番に表示されます。

実装結果↓

今回は以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
では！

▼▼人気の記事▼▼