Introduction to the

Performance Timeline Level 2 is an extension of HR-time 2. It defines PerformanceEntry to obtain and store Performance information.

Extend/define objects

Performance

Level 2 extends the performance three methods for obtaining PerformanceEntry performance data

The data structure
partial interface Performance {
  PerformanceEntryList getEntries (); // filter by name and entryType
  PerformanceEntryList getEntriesByType (DOMString type); // filter by name and type
  PerformanceEntryList getEntriesByName (DOMString name, optional DOMString type); // filter by name, entryType, type
};
typedef sequence<PerformanceEntry> PerformanceEntryList;
Copy the code
The basic use
let entries1 = performance.getEntries({name: "entry_name".entryType: "mark"});
// type:
// frame, navigation : PerformanceFrameTiming, PerformanceNavigationTiming
// resource : PerformanceResourceTiming
// mark : PerformanceMark : performance.mark()
// measure : PerformanceMeasure : performance.measure()
// paint : PerformancePaintTiming : first-paint, first-contentful-paint
let entries2 = performance.getEntriesByType(type) 
let entries3 = performance.getEntriesByName(name, type)
Copy the code

PerformanceEntry

PerformanceEntry is used to store all measured performance data: It records performance information for a resource (such as tags, navigation, rendering, etc.). PerformanceEntry attributes vary by entryType

The data structure
 interface PerformanceEntry {
     readonly    attribute DOMString           name;     / / not only
     / / entryType definition: https://w3c.github.io/timing-entrytypes-registry/#registry
     // [Note] The size is limited, whether it belongs to the timeline event
     readonly    attribute DOMString           entryType;
     readonly    attribute DOMHighResTimeStamp startTime; // Start from 0 if not set
     readonly    attribute DOMHighResTimeStamp duration; // Time difference between the first record and the last record
     [Default] object toJSON();
};
Copy the code
EntryType type
entryType specification
mark, measure user-timing
navigation navigation-timing
resource resource-timing
longtask longtask
paint paint-timing
element element-timing
event, first- input event-timing
layout-shift layout-instability
largest-contentful-paint largest-contentful-paint

PerformanceObserver

PerformanceObserver provides a buffered performance detection interface for monitoring performance measurement events on the browser performance timeline.

  1. Avoids polling to detect the browser timeline
  2. Reduced repetitive detection logic
  3. Reduced race conditions for resources
The data structure
interface PerformanceObserver {
  constructor(PerformanceObserverCallback callback);
  undefined observe (optional PerformanceObserverInit options = {}); 
  undefined disconnect ();
  PerformanceEntryList takeRecords(); // return copy of observer buffer
  [SameObject] static readonly attribute FrozenArray<DOMString> supportedEntryTypes;
};
Copy the code
The basic use
// Take measuring user-timing as an example
const userTimeObser = new PerformanceObserver(list= > {
    list.getEntries().map(({name, entryType, startTime, duration }) = > {})
    userTimeObser.disconnect()
})
userTimeObser.observe({entryTypes: ["mark"."measure"]});
userTimeObser.takeRecords()

// ["element", "event", "first-input", "largest-contentful-paint", "layout-shift", "longtask", "mark", "measure", "navigation", "paint", "resource"]
PerformanceObserver.supportedEntryTypes 
Copy the code

Reference:

Performance Timeline Level 2