1. このページの目的
Webページ読み込み時のイベントを観察する。
2. このページの説明
各イベントが発生した時間を、コンソールに出力している。
なので、ブラウザ開発ツールのコンソールを開き、このページを再読み込みすること。Ctrl + Shift + R キーでキャッシュを使わない再読み込みができる。こちらがよい。
2.1. 測定しているイベントなど
readyState.loading
readyState.interactive
readyState.complete
DOMContentLoaded event
load event
2.2. その他のメモ
- CSS, JS, 画像ファイルをそれぞれ2秒掛けて取得させている。
- なのだが、これらは平行して読み込まれるため、ほぼ同時に読み込まれる。
3. readyState.interactive を長引かせるための画像
4. コード
このページのソースを参照。
5. スクリーンショット
2024-11-06
Console上の結果 (Firefox 132.0.1)
注意:今とはページの内容が異なる。