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