document.readyState と load, DOMContentLoaded のタイミングについて

結論

• complete になると同時に load が発火する(仕様)
• interactive になったあとかつ complete になる前に DOMContentLoaded が発火する(仕様)

厳密には complete になったあとに load が発火するという仕様です。この前後関係があるため、 readystatechange -> load イベントの順が保証されています。

load 時に何か処理を行いたいとき

const addLoadEventListener = (f) => {
  if (document.readyState === 'complete') {
    f();
  } else {
    window.addEventListener('load', f);
  }
};

こうすると、すでに load イベントが実行済みだった場合も処理が実行されます。

readyState の変わるタイミングを検証するコード

こんな感じで検証しました。

const id = setInterval(() => {
  console.log(document.readyState);
}, 1000 / 100);

console.log('immediately',document.readyState);

window.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded', document.readyState);
});

window.addEventListener('load', () => {
  console.log('load', document.readyState);
  clearInterval(id);
});
window.addEventListener('readystatechange', () => {
  console.log('readystatechange', document.readyState);
});

DOMContentLoaded と load を数秒離すために画像を埋めて計測しました。document.readyState が complete になるのと load イベントが発火するのは必ず同時でした。