uhyohyo.net

JavaScript初級者から中級者になろう

十五章第三回 Performance Timeline

今回紹介するPerformance Timelineは、前回のNagivation Timingを拡張したもので、またもや時間に関する話です。

前回は、performanceのtimingプロパティにPerformanceTimingプロパティが入っており、それでページの表示に要した時間の情報が得られるというものでした。

PerformanceEntry

実は、このような時間計測の情報を複数Performanceオブジェクトに登録することができます。1つ1つの情報はPerformanceEntryオブジェクトで表されます。このPerformanceEntryは以下のプロパティを持ちます。

name
そのPerformanceEntryオブジェクトに付けられた名前です。
entryType
PerformanceEntryオブジェクトの種類です。
startTime
そのPerformanceEntryオブジェクトで最初に記録された時間です。
duration
そのPerformanceEntryオブジェクトでの一連の時間計測が終了するまでの時間です。

ここで、「時間」というのは数値で表されています。この数値はミリ秒単位で表されていて、0.001ミリ秒単位で計測されることになっています。ただし、実際の精度はブラウザやハードウェアに依存するでしょう。

こう見ると、なんだか抽象的でどんな情報が得られるかよく分かりません。それもそのはず、具体的な情報は、PerformanceEntryを継承したオブジェクトにより表されるのです。いくつかの種類のオブジェクトが存在するため、それらをまとめて扱うためにこのPerformanceEntryのプロパティを使うことができます。

nameプロパティというのも、実際にどういう名前がつけられるかはPerformanceEntryオブジェクトの種類に依存します。

さて、Performanceオブジェクトに登録されたPerformanceEntryオブジェクトを見るには、getEntriesメソッドを使用します。これはPerformanceEntryListオブジェクトなのですが、端的に言えばPerformanceEntryの配列です。getEntriesメソッドは引数がなく、Performanceオブジェクトに登録されている全てのPerformanceEntryオブジェクトが得られます。

他に、引数に文字列を指定することでentryTypeによる絞り込みができるgetEntriesByTypeメソッドと、同じくnameによる絞り込みができるgetEntriesByNameメソッドがあります。さらにgetEntriesByNameメソッドの場合、第二引数によりentryTypeによる絞り込みもできます。

以上でPerformanceEntryオブジェクトの取得方法は分かりましたね。しかし、具体的にどんな種類のPerformanceEntryがあるのかを知らないと役に立ちそうにありません。というわけで、次回からはPerformanceEntryの種類を解説していきます。

短いですが導入編ということで、今回はこれで終わりです。