kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

JavaScript

【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の理解に繋がっていれば幸いです。
では!




▼▼人気の記事▼▼

【経験談】給料を上げたいなら自分に対しての出費を増やそう【自己投資のススメ】

-JavaScript
-, , , ,

執筆者:

関連記事

JS

【JS】forEach・map・filter・reduce それぞれ説明【配列実践スキル】

こんにちは。今回はJavaScript(以下JS)の基本である配列について書きたいと思います。配列の中でも特に下記にフォーカスを当てていきます。SEOガン無視の短い内容となってますので、サクッと見れま …

JS

【5分で理解③ (配列編)】JavaScriptの配列のmapメソッドで繰り返し計算や指定要素だけ抽出

第3弾は繰り返し計算や指定要素だけ抽出する時に便利なmapメソッドです。

JS

returnについて

今回はJavaScriptでよく出てくるreturnについて書きます。

JS

【5分で理解① (配列編)】JavaScriptの配列のfindメソッド基本理解

第一弾は配列内データを検索する時に便利なfindメソッドです。

JS

【5分で理解④ (配列編)】JavaScriptの配列のsomeメソッドで配列内に”存在確認”

第4弾は配列内の存在の有無を確認する時に便利なsomeメソッド

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。