ラボラジアン 目次
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 を引けば、○○に掛かった時間が分かります。
各プロパティの情報元
- The PerformanceResourceTiming Interface | Performance Timing Level 2
- PerformanceResourceTiming – Web API | MDN
各プロパティが何を測定しているのかについては、Using the Resource Timing API – Web APIs | MDN に分かりやすい図が載っています。
また、このインターフェイスは、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
- Resource Timing API – Web APIs | MDN
- Using the Resource Timing API – Web APIs | MDN
- PerformanceResourceTiming – Web APIs | MDN
