ウェブページを作る際、JavaScriptで「DOMが使える状態」や「ページが完全にロードされた状態」をどう捉えるかは非常に重要です。特に「DOMContentLoaded load 違い 順番」というキーワードで検索している方は、これら二つのイベントがいつ発火し、どう使い分けるかを知りたくてこのページにたどり着いたはずです。この記事では、DOM構築、外部リソースの読み込み、スクリプトの属性なども含め、DOMContentLoadedとloadの違いと順番を専門的・最新情報に基づいてきちんと解説します。
目次
DOMContentLoaded load 違い 順番 を理解するための基本概念
まずはこのキーワード「DOMContentLoaded load 違い 順番」を正しく理解するために、前提となる用語の意味を整理します。特にWebブラウザがDOMを構築するプロセス、ページ読み込みに関わるリソース、そしてこれらがどのように順序立てて発生するかに焦点を当てます。単に「いつ発火するか」というだけでなく、DOMが使える状態、外部リソース（画像・CSS・iframe 等）の影響、スクリプト属性の役割も含めて説明します。
DOMContentLoadedとは何か
DOMContentLoadedイベントは、HTMLドキュメントのパース（解析）が完了し、DOMツリーが構築されて、
defer属性付きスクリプトやtype=moduleのスクリプトがあればそれらが読み込まれ実行された後に発火します。画像やスタイルシート、iframe等の外部リソースの完全な読み込みはこの時点では必須ではありません。
loadイベントとは何か
loadイベントは、ページに関わるあらゆるリソース――HTMLだけでなく画像、スタイルシート、スクリプト（asyncやdefer属性のものも含む）、iframeなど――の読み込みがすべて完了した時点で発火します。そのため、このイベントはページが“完全に読み込まれた”状態を意味します。
読み込み順序（順番）がどう決まるか
ブラウザによる読み込みの流れは次のようになります。まずHTMLのパースが始まり、同期スクリプトがあればそれを読み込んで実行し、続いてdeferスクリプトやモジュールスクリプトが読み込まれて実行され、DOMContentLoadedが発火します。最後に画像等すべての外部リソースが読み込まれ、loadイベントがwindowに対して発火します。
DOMContentLoadedとloadの違い：発火順番と条件
ここからは具体的に「DOMContentLoaded load 違い 順番」に関する違いに注目し、発火タイミングや条件を詳しく掘り下げます。特にスクリプト属性（async・defer）、document.readyState、外部リソースの影響といった要因でどう変わるのかがポイントです。
スクリプト属性：normal、defer、asyncの影響
通常のスクリプト（srcなし、または属性なし）はHTMLパーサがそのタグまで進むとすぐ実行され、DOM構築をブロックします。その後defer属性のスクリプトはHTMLパースが完了する前にダウンロード・実行されますが、DOMContentLoaded発火前まで実行完了している必要があります。async属性のスクリプトは読み込み・実行タイミングが不定で、DOMContentLoaded前か後かに起こることがあり、順序も必ずしもHTML文書に記述された順とは一致しません。
document.readyStateの状態とイベント発火の関係
document.readyStateは「loading」「interactive」「complete」の三つの状態を取り、ページの読み込み状況を示します。「interactive」はHTMLが解析されDOMが構築されているが外部リソースがまだ読み込み中である状態です。DOMContentLoaded発火は「interactive」状態に至り、defer等のスクリプトが実行された後です。「complete」は外部リソースも含め全部が読み込まれた後で、この状態になる直前か直後にloadイベントが発生します。
外部リソースの読み込みが順番に与える影響
新しい情報では、画像・CSS・iframeなどの外部リソースの読み込みがDOMContentLoaded発火には影響しません。ただし、同期スクリプトは先行するスタイルシートが読み込まれていないとブロックされる場合があり、これが間接的にDOMContentLoadedを遅らせることがあります。一方loadイベントはこれらすべての読み込みを待つので、特に画像が大きい場合やネットワークが遅い場合は発火がかなり遅くなります。
DOMContentLoadedとloadの順番比較表
以下の表で、典型的な構成要素による発火順番の違いを比較できるようにします。複数のケースでどうなるか整理して、順番がどう変化するかを把握できます。
| ケース | DOMContentLoaded発火時 | load発火時 | 発火順番 |
|---|---|---|---|
| HTML＋同期スクリプトのみ | HTML解析＋同期スクリプト実行後 | 外部リソースなしなのでほぼ同時 | DOMContentLoaded → load（非常に近接） |
| HTML＋deferスクリプトあり | deferスクリプトの実行完了後 | 画像・CSS・iframe等すべての読み込み完了後 | DOMContentLoaded → load |
| HTML＋asyncスクリプトあり | HTML解析＋deferスクリプト完了後、asyncスクリプトは発火前後のどちらもありうる | すべてのリソース・スクリプト完了後 | 通常はDOMContentLoaded → load、ただしasyncスクリプトのタイミング次第で前後変動 |
| 大量の画像や外部スタイルシートあり | HTML解析＋スクリプト実行後（画像CSS読み込み待たずに発火） | すべての画像・CSS完了後、非常に遅れることあり | DOMContentLoaded → load、大きな差がつくことあり |
実際に使い分けるシーンとベストプラクティス
ここからは、「どの場合にDOMContentLoadedを使い、どの場合にloadを使うべきか」について、実践的な観点で解説します。ページ速度やユーザー体験を向上させるための最新の推奨事項も含めています。
DOMContentLoadedを使うべきケース
DOM構造が必要な操作（イベントハンドラーの設置、要素の参照、コンテンツの書き換えなど）は、ページの外部リソース完了を待たずともDOMContentLoaded発火時点で安心して行えます。ユーザーが早期に操作できる状態を作りたいときや、Webアプリケーションで初期化処理を高速に済ませたいときに適切です。
loadを使うべきケース
画像やiframe、スタイルシートなどが重要なページ演出やレイアウトに影響を与える場合、これらがすべて読み込まれた状態で処理したい時にはloadイベントを使います。例えば“全画面背景画像”を使ったページや、画像の寸法が表示前に必要な処理、またページの読み込み完了を測定する分析ツールなどでloadが使われます。
スクリプトの配置と属性に関する最新の推奨設定
最新のウェブ開発の流れでは、同期スクリプトは可能な限り避け、defer属性を使うことでHTMLパース中のブロッキングを回避することが推奨されます。重要なものはdefer、それ以外の非依存スクリプトはasyncを検討。モジュールスクリプトは暗黙でdeferと同様の振る舞いをするものが多く、互換性の高い方法となります。
まとめ
DOMContentLoadedとloadの違いと発火順番をまとめると次の通りです。まずHTMLの解析完了とDOM構築、deferやモジュールスクリプトの実行が終わるとDOMContentLoadedが発火。その後画像やCSS、iframeなど含むすべての外部リソースが読み込まれた段階でloadイベントが発火します。スクリプトの属性（normal・defer・async）やdocument.readyStateもこの順番に大きな影響を与えます。
実践では、DOM操作中心の処理ならDOMContentLoadedを使う、すべてが揃ってから実行したい処理や分析用途であればloadを使うという使い分けが最適です。スクリプトは可能な限りdeferを使い、asyncは依存性が少ないものに限るよう設計するとページ速度改善とユーザー体験向上の両立が図れます。
コメント