プログラミング

Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する

投稿日:2020年12月23日 更新日:

1. Resource Timing API について

Resource Timing Level 2 というAPIを使うと、特定のリソースの読み込みに掛かった時間を計測することができます。

このAPIを使ったサンプルコードを紹介します。

2. サンプルコード

このサンプルコードでは、Webページがロードされた直後の時点で読み込まれている各リソースを表す PerformanceResourceTiming オブジェクトを、開発者ツールの Console パネルに出力しています。但し、画像リソースについては、それらの情報を分かりやすく加工したものも出力します。

JavaScript

function resourceTiming() {
  let resourceList = window.performance.getEntriesByType("resource"),
       p;
  for (i = 0; i < resourceList.length; i++) {
    p = resourceList[i];
    console.log("= Resource entry[" + i + "]");
    if (p.initiatorType == "img") {
      console.log("initiatorType: " + p.initiatorType);
      console.log("name: " + p.name);
      // いろいろな掛かった時間
      console.log("Domain Lookup に掛かった時間 = " + (p.domainLookupEnd - p.domainLookupStart));
      console.log("Connect に掛かった時間       = " + (p.connectEnd - p.connectStart));
      console.log("Response を受け取るのに掛かった時間 = " + (p.responseEnd - p.responseStart));
      // 以下は = duration でもある。
      console.log("Total で掛かった時間         = " + (p.responseEnd - p.startTime));

      console.table(p.toJSON());
     }
     console.log(p);
  }
}
  • window.performance.getEntriesByType("resource") を実行すると、その時点で読み込まれているリソース毎に作成された PerformanceResourceTiming オブジェクトの配列になって返ってきます。このオブジェクトは、読み込みに掛かった時間などの情報がプロパティとしてセットされています。
  • そして、ここでは PerformanceResourceTiming インターフェイスのプロパティを出力しているわけですが、各プロパティについての情報は後述します。
  • MDN に載っていたコードを参考にしたのですが、元のページが分からなくなってしまいました。例えば、Using the Resource Timing API – Web API | MDN にもサンプルコードが載っています。

HTML

<body onload="resourceTiming()">

例えば、こんな感じに出力されます。

結果の例
結果の例

3. PerformanceResourceTiming インターフェイス

サンプルコードでは、PerformanceResourceTiming インターフェイスのプロパティを出力しています。

[Exposed=(Window,Worker)]
interface PerformanceResourceTiming : PerformanceEntry {
    readonly        attribute DOMString           initiatorType;
    readonly        attribute DOMString           nextHopProtocol;
    readonly        attribute DOMHighResTimeStamp workerStart;
    readonly        attribute DOMHighResTimeStamp redirectStart;
    readonly        attribute DOMHighResTimeStamp redirectEnd;
    readonly        attribute DOMHighResTimeStamp fetchStart;
    readonly        attribute DOMHighResTimeStamp domainLookupStart;
    readonly        attribute DOMHighResTimeStamp domainLookupEnd;
    readonly        attribute DOMHighResTimeStamp connectStart;
    readonly        attribute DOMHighResTimeStamp connectEnd;
    readonly        attribute DOMHighResTimeStamp secureConnectionStart;
    readonly        attribute DOMHighResTimeStamp requestStart;
    readonly        attribute DOMHighResTimeStamp responseStart;
    readonly        attribute DOMHighResTimeStamp responseEnd;
    readonly        attribute unsigned long long  transferSize;
    readonly        attribute unsigned long long  encodedBodySize;
    readonly        attribute unsigned long long  decodedBodySize;
    [Default] object toJSON();
};

DOMHighResTimeStamp 型のプロパティは、時刻がセットされます。ここで定義されている順番が、そのまま発生する順番になっているようです。○○Start と ○○End というペアの名前のプロパティは、○○End から ○○Start を引けば、○○に掛かった時間が分かります。

各プロパティの情報元

各プロパティが何を測定しているのかについては、Using the Resource Timing API – Web APIs | MDN に分かりやすい図が載っています。

Resource timing properties
Resource timing properties

また、このインターフェイスは、PerformanceEntry インターフェイスを拡張しているため、PerformanceEntry インターフェイスのプロパティも持っています。

[Exposed=(Window,Worker)]
interface PerformanceEntry {
  readonly    attribute DOMString           name;
  readonly    attribute DOMString           entryType;
  readonly    attribute DOMHighResTimeStamp startTime;
  readonly    attribute DOMHighResTimeStamp duration;
  [Default] object toJSON();
};

4. デモページ

5. 参考

仕様

MDN

ブラウザの対応状況

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

webpack 3 を使ったウェブページ開発手順

webpack 3 を使って、簡単なウェブページを開発する手順を紹介します。あくまで一つの例です。 1つ1つ細かい説明はできていませんが、「だいたいこんなふうにして作ることができますよ」ということが伝 …

e-Stat API を試しています。

最近、e-Stat 政府統計の総合窓口 というサイトの API機能 を試しています。 e-Stat というのは「政府統計のデータ」が閲覧できるサイトで、プログラムによってデータが取得できるように AP …

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

TweenMax を使ったサンプルページを作りました

TweenMax を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. デモペ …

Homestead + Xdebug + PhpStorm でリモートデバッグ環境をつくる

目次1. はじめに1. Homestead とは?2. Xdebug とは?3. PhpStorm とは?2. 今回の環境3. Homestead 側の設定4. Windows側の設定1. PHPの導 …