図に示すように、Chrome ブラウザのデバッグ ツールを開きます。
DOMContentLoaded : DOM ツリーの構築が完了しました。つまり、HTML ページが HTML 構造を上から下、最後の終了タグまで解析する時間です。
ロード: ページのロードが完了したとき。DOM ツリーの構築後、HTML/CSS で画像、音声、動画などの外部リソースを読み込み続け、読み込みが完了するとページが読み込まれたとみなされます。
一般的に、Web サイトの応答時間は読み込み時間を意味します。これは、ユーザーがこの時間を認識しやすいためです。この時点で、ブラウザーが作業を完了し、ページの準備ができていることがわかります。
関係: DOMContentLoaded は読み込み時間よりも短くなり、両者の時間差は外部リソースの読み込み時間とほぼ同じになります。
Finish : ページ上のすべての http リクエストを送信してから応答が完了するまでの時間。HTTP1.0/1.1 プロトコルによって制限されます。単一ドメイン名の同時リクエスト数は 6 です。つまり、すべてのリクエストが Finish になります ( XHR リクエストだけでなく、DOC、img、js、css などのリソースのリクエストも、同時実行数 6 の制限内で完了します。
場合によっては、Finish が止まらずに増加し続けるように見えるため、Web ページの応答時間の最良の評価ではない可能性があります。
関係: 終了時間は DOMContentLoaded とロード時間に直接関係しません。テスト後、終了時間はロード時間よりも長いように見えますが、ロード時間よりも短い場合もあります。
- Finish の時間は Load の時間よりも長く、これはページにかなりの量のリクエストがあることを意味します。
- 終了時間は読み込み時間よりも短く、ページ リクエストが非常に少ないことを意味します。ページが HTML ドキュメント リクエストを 1 つだけ含む静的ページの場合、終了時間は基本的に HTML ドキュメント リクエストの時間と同じになります
。