ページ読み込みのイベント

ページの読み込み完了

HTMLの解釈　＋　遅延実行指定されたスクリプトの実行

DOMContentLaded 　が　document　に発生

ドキュメントは操作可能 

※ 画像　や　async　スクリプトは読み込み中

HTMLの解釈　＋　スクリプトの実行　＋　外部リソースのダウンロード

load　が　window　に発生

ページの読み込み状態の変化

readystatechange　が　document　に発生

ページの読み込み状態

document.readyState

値が変化すると、　readystatechange　イベントが　document　に発生する

HTMLを解析中

"loading"

DOMツリーが完成

"interactive"

ページの読み込み完了

"complete"

ページ読み込み完了までの流れ

　HTMLを解析中

document.readyState === "loading"

　DOMツリーが完成

document.readyState === "interactive"

readystatechange　イベントが　document　に発生する
defer, async　属性のスクリプトや画像などは読み込み中

　defer　属性のスクリプトの実行完了

DOMContentLoaded　イベントが　document　に発生する

　ページの読み込み完了

document.readyState === "complete"

readystatechange　イベントが　document　に発生する
load　イベントが　window　に発生する