Performance Timeline Test

1. このページの目的

Performance Timeline API を試す。

2. Performance Timeline とは？

The Performance Timeline API defines extensions to the Performance interface to support client-side latency measurements within applications. The extensions provide interfaces to retrieve performance entry metrics based on specific filter criteria. The standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are added to the browser's performance timeline.

(引用元：Performance Timeline - Web APIs | MDN)

3. Performance Timeline の基礎知識

performance metric の種類 (entryType)

• frame, navigation
• resource
• mark (performance.mark() を実行すると、このエントリーが追加される)
• measure
• paint
• longtask
• first-input (表に載っていなかった。最初のキー操作？)

詳細：PerformanceEntry.entryType - Web APIs | MDN

performance.measure() メソッド

4. Performance Timeline API を使ってみる

Using Performance Timeline - Web APIs | MDN にあるコードを試す。

出力結果

5. メモ

performace のメソッドを何も実行せずに getEntries() で得られるエントリー

• そのウェブページを表す（？）エントリー (entryType: navigation)
• 各リソースを表すエントリー (entryType: resource)
• first-paint (=FP) or first-contentful-paint (=FCP) (entryType: paint)
• 最初のキー操作を表すエントリー (entryType: first-input) (あれば)
• mark, measure, longtask がない。(frame がないのは分かる)

参考

• 5. The PerformanceObserver interface | Performance Timeline Level 2
• Performance Timeline - Web APIs | MDN
• PerformanceObserver - Web APIs | MDN