DOMContentLoadedとloadの違いと順番！正しい使い分けを解説

ウェブページを作るとき、「DOMContentLoadedとloadどちらを使うべきか」「この順番はどうなっているのか」が分かると、ユーザー体験やパフォーマンスが大きく変わります。この記事ではDOMContentLoadedとloadの定義から発生タイミング、順番、使い分け方、実際のサンプルコードまで、最新情報を交えて丁寧に解説します。

DOMContentLoaded load 違い 順番とは何か

まず、DOMContentLoaded load 違い 順番が指すところ、すなわち二つのイベントの違いとその発生順序について基本から押さえておきます。

DOMContentLoadedイベントの定義

DOMContentLoadedはHTML文書が完全に解析され、DOMツリーが構築された時点で発火するイベントです。scriptタグで外部ファイルを指定する場合はdeferやmoduleタイプのものが完了するまで待ちますが、画像やCSS・iframeなどのリソースの読み込み完了は待ちません。要するに、構造的な読み込みが終わった時点を示します。最新のブラウザ仕様でもこの定義が維持されています。

loadイベントの定義

loadイベントは、DOMContentLoadedの後に発火し、ページ内のすべてのリソース（画像、スタイルシート、スクリプト、iframeなど）が完全に読み込まれた時点で起こります。ユーザーにとって可視的なリソースが全て揃うため、このイベントが発火するまでページの「完全な準備」は整っていません。

両者の目的の違い

DOMContentLoadedはDOM操作やイベントリスナーの登録を早く始めたい場合に使用されます。ページ構造が把握できればよいので、インタラクティブな初期処理に向いています。一方、loadは全リソース準備後の処理、たとえば画像を使ったスライダーの初期化やアニメーションなど、見た目が完全に整った後の処理に使うのが適切です。

DOMContentLoadedとloadの発生順序と流れ

次に、DOMContentLoadedとloadがどのような順序で発生するのか、ブラウザがどのように動いているのかを具体的に流れで説明します。

読み込みステージとreadyStateの変化

ページ読み込み中、document.readyState はまず loading、その後interactive、最後にcompleteへと進みます。loading中はHTMLの解析が進行中、interactiveでDOMContentLoaded発火直前、completeでloadイベント発火可能な状態です。このステータス変化を理解するとイベント発生の順番がつかみやすくなります。

defer／async属性が順序に与える影響

defer属性を持つスクリプトはHTML解析完了後、DOMContentLoaded前に実行されます。async属性は読み込み順序が保証されず、スクリプトが読み込まれ次第実行されるため、順序が予測しにくくなります。syncスクリプト（通常のscriptタグ）はCSSOMや他の同期的なリソース読み込みをブロックすることがあります。

いつDOMContentLoadedがfireされ、いつloadがfireされるか

DOMContentLoadedはDOMツリー構築とdeferやmoduleスクリプトの実行が完了した時点で発火します。loadはその後、すべての外部リソースがロード完了した時点で発火します。たとえば大きな画像や背景画像などがあるページでは、DOMContentLoadedがかなり先にきて、loadはそれからさらに時間がかかります。

実際の順番の例と比較表

言葉だけでなく具体的な順番を見ることで違いがより明確になります。以下に典型的な発生順を示します。

このようにDOMContentLoadedはリソースの読み込みを待たず、loadはすべての読み込みが終わった後であることが一目瞭然です。CSS・画像の読み込みが遅いとloadまでの時間差が大きくなります。

よくある誤解と注意点

DOMContentLoaded load 違い 順番に関して、開発者が陥りやすい誤解があります。ここで正しい理解に修正します。

DOMContentLoadedがCSSをすべて読み込むと思っている

CSSファイルはDOMの構築には関与しますが、DOMContentLoadedはすべてのCSSがロードされないと発火しないわけではありません。外部CSSが同期的な読み込みをさせた場合、CSSOMの構築が遅れることがあり間接的に影響しますが、CSSが遅れていてもDOMContentLoadedは発火します。

asyncスクリプトが順序を乱すこと

async属性付きのスクリプトは読み込みと実行が非同期であり、DOM構築やDOMContentLoaded発火の順序に影響する可能性があります。特に複数のasyncスクリプトを使っている場合、意図した順序で処理が実行されないことがあります。

ブラウザによる差異と仕様規格

仕様上、DOMContentLoadedはloadより先に発火することが保証されています。どのブラウザでも、仕様に基づきHTML解析とDOM構築→DOMContentLoaded→すべてのリソース読み込み完了→loadというシーケンスです。ただし、リソースの種類やスクリプト配置によって発火までの時間には差があります。

実用例：正しい使い分け方とコードサンプル

DOMContentLoaded load 違い 順番を踏まえて、実際にどのように使い分けるか具体的なコード例で解説します。開発時に混乱しないように整理します。

DOM構造操作が必要な処理はDOMContentLoadedで始める

たとえば、ユーザーがスクロールする前にナビゲーションバーを生成したり、モーダルウィンドウ用の要素を挿入したりする処理は、DOMが構築されていないとエラーになります。こうした処理はDOMContentLoadedイベントの中に書くのが正しいです。

画像読み込みが必要な処理はloadを使う

画像のサイズ取得や背景画像の表示確認、スライダーの初期化など、すべての画像が読み込まれていないと正しく動かない処理はloadイベントで開始するのが安心です。loadイベント後であれば、外部リソースも揃っているためレイアウト崩れや未読み込みエラーを防げます。

片方だけ使うならどちらを選ぶかの指針

小さなインタラクションや速度重視のスクリプトだけならDOMContentLoadedで十分です。ページ全体が重く、画像や動画が多いケースではloadまで待つか、あるいは部分的にDOMContentLoadedを活用し、残りはloadで処理するという二段階アプローチが有効です。

比較・詳細テーブル：特徴まとめ

要点が把握しやすいよう、DOMContentLoadedとloadの特徴を比較表でまとめます。

パフォーマンスへの影響と最適化方法

DOMContentLoaded load 違い 順番を正しく理解すると、ページの速度やユーザー体験を改善できます。ここでは最新情報に基づいた最適化手法を紹介します。

クリティカルレンダリングパスの短縮

レンダリングパスとはDOMとCSSOMの構築、レンダーツリー生成、レイアウト、ペイントの流れです。同期スクリプトがCSSの読み込みより前にあると、DOMContentLoadedの遅延を引き起こすことがあります。scriptにdeferを付けたり、CSSを可能な限り軽量化／非同期化することで、このパスを最短化できます。

画像やフォントの読み込み戦略

画像やフォントはloadイベントを遅らせる主要因です。遅延ロード（lazy loading）やプレースホルダー利用、フォントの事前取得などを用いて、loadイベントまでの時間を短く保つ工夫が可能です。こうすることで、DOMContentLoadedとloadの差が必要以上に大きくならないようにできます。

スクリプト配置と属性の見直し

スクリプトをhead内に置くならdefer属性を使う、bodyの末尾に置く／moduleを使うなど、位置と属性を見直すことが重要です。deferスクリプトはDOM構築後に順番通り実行され、DOMContentLoadedとの兼ね合いが安定します。

まとめ

DOMContentLoadedとloadの違いと順番を理解することは、より高品質で高速なウェブ体験を提供するために欠かせません。DOMContentLoadedはDOMツリーが完成し、構造が整った段階で発生し、loadはすべてのリソースが揃った後に起こります。

基本の使い分けとして、初期DOM操作やスクリプトの登録やUI初期化などはDOMContentLoadedで、画像やレイアウト全体に関わる処理はloadで行うのが理にかなっています。スクリプト属性や読み込み順、リソース戦略を見直すことで、DOMContentLoadedとloadの発生タイミングを最適化し、ユーザー体験とパフォーマンス向上につながります。