performance timeline
1.0.0
PerformanceTimelineの仕様では、Web開発者がWebアプリケーションの特定の側面を測定して、より速くする方法を定義します。これらの測定値を取得するための2つの主な方法を紹介します。パフォーマンスインターフェイスからのゲッターメソッドとPerformanceObserverインターフェイスを介して。後者は、これらの測定値を照会することのパフォーマンスへの影響を減らすための推奨される方法です。
PerformanceEntryオブジェクトは、特定のメトリックのパフォーマンスデータをホストできます。 PerformanceEntryには、 name 、 entryType 、 startTime 、およびduration 4つの属性があります。この仕様は、具体的なパフォーマンスエントリーオブジェクトを定義しません。新しいコンクリートタイプのパフォーマンスエントリオブジェクトを定義する仕様の例は、ペイントタイミング、ユーザーのタイミング、リソースタイミング、ナビゲーションタイミングです。
パフォーマンスインターフェイスは、パフォーマンスエントリーオブジェクトのリストを返すことができる3つの新しいメソッドで拡張されています。
getEntries() ：パフォーマンスオブジェクトで使用可能なすべてのエントリを返します。getEntriesByType(type) ： entryTypeがタイプと一致するパフォーマンスオブジェクトで使用可能なすべてのエントリを返します。getEntriesByName(name, type) ： nameが名前と一致するパフォーマンスオブジェクトで使用可能なすべてのエントリを返します。オプションのパラメータータイプが指定されている場合、 entryTypeがタイプと一致するエントリのみを返します。 次の例はgetEntriesByName()を使用して最初のペイント情報を取得する方法を示しています。
// Returns the FirstContentfulPaint entry, or null if it does not exist.
function getFirstContentfulPaint ( ) {
// We want the entry whose name is "first-contentful-paint" and whose entryType is "paint".
// The getter methods all return arrays of entries.
const list = performance . getEntriesByName ( "first-contentful-paint" , "paint" ) ;
// If we found the entry, then our list should actually be of length 1,
// so return the first entry in the list.
if ( list . length > 0 )
return list [ 0 ] ;
// Otherwise, the entry is not there, so return null.
else
return null ;
} PerformanceObserverオブジェクトは、 entryType値に応じて、新しいPerformanceEntryオブジェクトを通知できます。オブジェクトのコンストラクターはコールバックを受信する必要があります。コールバックは、ユーザーエージェントがオブザーバーが観察されているentryTypeの値と一致する新しいエントリを派遣しているときはいつでも実行されます。このコールバックは、PerformanceEntryごとに1回実行されず、PerformanceEntryの作成後もすぐに実行されません。代わりに、エントリはPerformanceObserverで「キュー」され、ユーザーエージェントは後でコールバックを実行できます。コールバックが実行されると、すべてのキューに掲載されたエントリが関数に渡され、PerformanceObserverのキューがリセットされます。 PerformanceObserverは最初は何も観察しません。 observe()メソッドは、どのようなPerformanceEntryオブジェクトを観察するかを指定するために呼び出さなければなりません。以下に詳述するように、「EntryTypes」配列または単一の「タイプ」文字列のいずれかで、 observe()メソッドを呼び出すことができます。これらのモードを混ぜることはできません。または、例外がスローされます。
建設時にPerformanceObserverに渡されたコールバックは、 PerformanceObserverCallbackです。これは、次のパラメーターを備えたボイドコールバックです。
entries ：コールバックでディスパッチされているエントリのリストを含むPerformanceObserverEntryListオブジェクト。observer ：上記のエントリを受信しているPerformanceObserverオブジェクト。hasDroppedEntries ： observer現在、バッファーがいっぱいになっているために少なくとも1つのエントリが失われたentryTypeを観察しているかどうかを示すboolean 。バッファーフラグセクションを参照してください。 supportedEntryTypes Static PerformanceObserver.supportedEntryTypesは、ユーザーエージェントがサポートするentryType値の配列を、アルファベット順にソートします。特定のタイプのサポートを検出するために使用できます。
observe(entryTypes)この場合、PerformanceObserverはobserve()ための単一の呼び出しでさまざまなentryTypes値を指定できます。ただし、この場合は追加のパラメーターは許可されていません。複数のobserve()呼び出しは、観察されるオブジェクトの種類をオーバーライドします。呼び出しの例： observer.observe({entryTypes: ['resource', 'navigation']}) 。
observe(type)この場合、PerformanceObserverは、 observe()メソッドへの呼び出しごとに単一のタイプのみを指定できます。この場合、追加のパラメーターが許可されています。過去に同じtypeオブザーバーに呼びかけていない限り、複数のobserve()呼び出しが積み重ねられます。その場合、それはオーバーライドします。呼び出しの例： observer.observe({type: "mark"}) 。
buffered旗observe(type)で使用できる1つのパラメーターは、この仕様で定義されています： bufferedフラグはデフォルトでは設定されていません。このフラグが設定されると、ユーザーエージェントは、PerformanceObserverの作成の前にバッファリングされたことを記録し、このobserve()コールが発生した後、最初のコールバックで受信されます。これにより、Web開発者は、ページのロード中に早期に発送されたエントリを見逃すことなく、PerformanceObserversを登録できます。このフラグを使用した呼び出しの例： observer.observe({type: "measure", buffered: true}) 。
各entryTypeには、レジストリで説明されているバッファリングに関する特別な特性があります。特に、バッファリングされた各タイプのエントリの数には制限があることに注意してください。 entryTypeのバッファーがいっぱいになると、新しいエントリがバッファリングされません。 PerformanceObserverは、コールバックのhasDroppedEntryパラメーターを介してバッファーがいっぱいになったためにエントリがドロップされたかどうか（バッファリングされていない）かどうかを照会することができます。
disconnect()この方法は、PerformanceObserverにエントリがもう通知されなくなったときに呼び出すことができます。
takeRecords()このメソッドは、PerformanceObserver向けにキューに留められているが、コールバックがまだ実行されていないエントリのリストを返します。エントリのキューは、PerformanceObserver用にも空になります。特定の時点までのすべてのエントリが処理されるように、 disconnect()とタンデムで使用できます。
次の例は、すべてのユーザーのタイミング、リソースタイミングエントリを、観察者がマークと測定するPerformanceObserverを使用してログを記録します。
// Helper to log a single entry.
function logEntry ( entry => {
const objDict = {
"entry type" : , entry . entryType ,
"name" : entry . name ,
"start time" : , entry . startTime ,
"duration" : entry . duration
} ;
console . log ( objDict ) ;
} ) ;
const userTimingObserver = new PerformanceObserver ( list => {
list . getEntries ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
} ) ;
// Call to log all previous and future User Timing entries.
function logUserTiming ( ) {
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "mark" ) ) {
console . log ( "Marks are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "mark" , buffered : true } ) ;
}
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "measure" ) ) {
console . log ( "Measures are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "measure" , buffered : true } ) ;
}
}
// Call to stop logging entries.
function stopLoggingUserTiming ( ) {
userTimingObserver . disconnect ( ) ;
}
// Call to force logging queued entries immediately.
function flushLog ( ) {
userTimingObserver . takeRecords ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
}
