DOM

：

：

Document：DOMContentLoaded イベント

　編集：2022.10.08 by T.A.

[Edge]。→、

¶HTML の初期文書が完全に読み込まれ時点でリソースが解釈された時点で発生します。¶副リソースのスタイルシート、画像、サブ フレームの読み込みや解釈は完了されていません。

mdn： HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブ フレームの読み込みが完了するのを待ちません。

バブリング あり
キャンセル 可能（ただし、キャンセル可能ではない単純イベントとして定義されている）
インターフェイス Event
イベント ハンドラー プロパティ なし

別なイベントである load は、ページ全体が読み込まれたときにのみ使用します。load を DOMContentLoaded がより適切である場面で使ってしまうことがよくある誤りです。

同期 JavaScript は DOM の解析をいったん中断します。ユーザーがページをリクエストした後でできるだけ早く DOM が解析されるようにしたい場合は、JavaScript を非同期にして、スタイルシートの読み込みを最適化してください。ふつう通りに読み込むと、スタイルシートは HTML と並行で読み込まれ、中心となる HTML 文書の帯域を「盗む」ため、ふつう通りに読み込むと DOM 解析の速度を低下させます。

例

以下のスクリプトが組み込んであります： 


 
//D＝[object]：[object Event]

詳細
//isTrusted＝[boolean]：true
//type＝[string]：load
//target＝[object]：[object HTMLDocument]
//currentTarget＝[object]：[object Window]
//eventPhase＝[number]：2
//bubbles＝[boolean]：false
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：false
//timeStamp＝[number]：160.2000002861023
	//…


//DA＝[object]：[object Event]

詳細
//isTrusted＝[boolean]：true
//type＝[string]：DOMContentLoaded
//target＝[object]：[object HTMLDocument]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：false
//timeStamp＝[number]：44.5
//srcElement＝[object]：[object HTMLDocument]
//returnValue＝[boolean]：true
//cancelBubble＝[boolean]：false
	//…




 
読み込みだけの load の方が遅いのはなぜ？。









テスト