javascript リクエスト時間やレスポンス時間を取得する

javascript リクエスト時間やレスポンス時間を取得する

javascriptで、performance.timingをリクエスト時間やレスポンス時間を取得するサンプルコードを記述してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

performance.timing使い方

リクエスト時間は、performance.timingの
「レスポンス受信の開始時間(timing.responseStart)」から
「リクエスト送信の開始時間(timing.requestStart)」を
引くことで求めることが可能です。

レスポンス時間も
「レスポンス受信の終了時間(timing.responseEnd)」から
「レスポンス受信の開始時(timing.responseStart)」を
引くことで求めることが可能です。

また、DOM構築時間はDOMの構築完了時間から、パース開始時間を引くことで求めることが可能です。

サンプルコード

以下は、
ロード時にリクエスト時間と、レスポンス時間とDOM構築時間を表示する
サンプルコードとなります。

※cssには「tailwind」を使用してます。

表示されていることが確認できます。