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

1. このページの目的

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

2. 本ページでやっていること

(1) 計測対象は画像とする

(2) 本ページで実行しているソースコード（抜粋）

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);
  }
}

HTML

<body onload="resourceTiming()">

3. 結果

4. 参考情報

PerformanceResourceTiming Interface

[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();
};

5. メモ

6. 参考