Performance Timeline Level 2

Abstract

This specification extends the High Resolution Time specification [HR-TIME-2] by providing methods to store and retrieve high resolution performance metric data.

1. Introduction

This section is non-normative.

Accurately measuring performance characteristics of web applications is an important aspect of making web applications faster. This specification defines the necessary Performance Timeline primitives that enable web developers to access, instrument, and retrieve various performance metrics from the full lifecycle of a web application.

[NAVIGATION-TIMING-2], [RESOURCE-TIMING], and [USER-TIMING] are examples of specifications that define timing information related to the navigation of the document, resources on the page, and developer scripts, respectively. Together these and other performance interfaces define performance metrics that describe the Performance Timeline of a web application. For example, the following script shows how a developer can access the Performance Timeline to obtain performance metrics related to the navigation of the document, resources on the page, and developer scripts:

Example 1

<!doctype html>
<html>
  <head>
  </head>
  <body onload="init()">
    <img id="image0" src="https://www.w3.org/Icons/w3c_main.png" />
    <script>
       function init()
       {
            performance.mark("startWork"); // see [USER-TIMING]
            doWork(); // Some developer code
            performance.mark("endWork");
            measurePerf();
       }
       function measurePerf()
       {
           var perfEntries = performance.getEntries();
           for (var i = 0; i < perfEntries.length; i++)
           {
                 if (window.console) {
                   console.log("Name: "        + perfEntries[i].name      +
                               " Entry Type: " + perfEntries[i].entryType +
                               " Start Time: " + perfEntries[i].startTime +
                               " Duration: "   + perfEntries[i].duration  + "\n");
                 }
           }
       }
    </script>
  </body>
</html>

Alternatively, the developer can observe the Performance Timeline and be notified of new performance metrics via the PerformanceObserver interface:

Example 2

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <img id="image0" src="https://www.w3.org/Icons/w3c_main.png" />
    <script>
    var doneObservingEvents = false;
    var observer = new PerformanceObserver(function(list) {
      var perfEntries = list.getEntries();
      for (var i = 0; i < perfEntries.length; i++)
      {
           if (window.console) {
             console.log("Name: "        + perfEntries[i].name      +
                         " Entry Type: " + perfEntries[i].entryType +
                         " Start Time: " + perfEntries[i].startTime +
                         " Duration: "   + perfEntries[i].duration  + "\n");
           }
      }
      // maybe disconnect after processing the events.
      if (doneObservingEvents) {
           observer.disconnect();
      }
    });
    // subscribe to Resource-Timing and User-Timing events
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    </script>
  </body>
</html>

The PerformanceObserver interface was added in Performance Timeline Level 2 and is designed to address limitations of the buffer-based approach shown in the first example. By using the PerformanceObserver interface, the application can:

Avoid polling the timeline to detect new metrics
Eliminate costly deduplication logic to identify new metrics
Eliminate race conditions with other consumers that may want to manipulate the buffer

The developer is encouraged to use PerformanceObserver where possible. Further, new performance API's and metrics may only be available through the PerformanceObserver interface.

3. Performance Timeline

Each ECMAScript global environment has:

a performance observer task queued flag and an associated list of registered performance observer objects which is initially empty.
a performance entry buffer to store PerformanceEntry objects. It is initially empty.

To queue a PerformanceEntry (new entry), run these steps:

Let interested observers be an initially empty set of PerformanceObserver objects.
For each registered performance observer (observer):
1. If observer's PerformanceObserverInit entryTypes includes new entry’s entryType value, append observer to interested observers.
For each observer in interested observers:
1. Append new entry to observer buffer.
If the performance observer task queued flag is set, terminate these steps.
Set performance observer task queued flag.
Queue a task that consists of running the following substeps. The task source for the queued task is the performance timeline task source.
1. Unset performance observer task queued flag.
2. Let notify list be a copy of ECMAScript global environment's list of registered performance observer objects.
3. For each PerformanceObserver object po in notify list, run these steps:
  1. Let entries be a copy of po’s observer buffer.
  2. Empty po’s observer buffer.
  3. If entries is non-empty, call po’s callback with entries as first argument and callback this value. If this throws an exception, report the exception.

The performance timeline task queue is a low priority queue that, if possible, should be processed by the user agent during idle periods to minimize impact of performance monitoring code.

3.1 The `PerformanceEntry` interface

The PerformanceEntry interface hosts the performance data of various metrics.

[Exposed=(Window,Worker)]
interface PerformanceEntry {
    readonly attribute DOMString           name;
    readonly attribute DOMString           entryType;
    readonly attribute DOMHighResTimeStamp startTime;
    readonly attribute DOMHighResTimeStamp duration;
    serializer = {attribute};
};

The name attribute MUST return an identifier for this PerformanceEntry object. This identifier does not have to be unique.

The entryType attribute MUST return the type of the interface represented by this PerformanceEntry object.

Note

Valid entryType values are: "mark [USER-TIMING], "measure" [USER-TIMING], "navigation" [NAVIGATION-TIMING-2], "resource" [RESOURCE-TIMING].

The startTime attribute MUST return the time value of the first recorded timestamp of this performance metric.

The duration attribute MUST return the time value of the duration of the entire event being recorded by this PerformanceEntry. Typically, this would be the time difference between the last recorded timestamp and the first recorded timestamp of this PerformanceEntry. If the duration concept doesn't apply, a performance metric may choose to return a duration of 0.

3.2 Extensions to the `Performance` interface

This extends the Performance interface [HR-TIME-2] and hosts performance related attributes and methods used to retrieve the performance metric data from the Performance Timeline.

partial interface Performance {
    PerformanceEntryList getEntries();
    PerformanceEntryList getEntriesByType(DOMString type);
    PerformanceEntryList getEntriesByName(DOMString name,
                                          optional DOMString type);
};

typedef sequence<PerformanceEntry> PerformanceEntryList;

The getEntries method returns a PerformanceEntryList object returned by 4.1 Filter performance entry buffer by name and type algorithm with name and type set to null.

The getEntriesByType method returns a PerformanceEntryList object returned by 4.1 Filter performance entry buffer by name and type algorithm with name set to null and type set to type.

The getEntriesByName method returns a PerformanceEntryList object returned by 4.1 Filter performance entry buffer by name and type algorithm with name set to name and type set to null if optional entryType is omitted, and type set to type otherwise.

3.3 The `PerformanceObserver` interface

The PerformanceObserver interface can be used to observe the Performance Timeline and be notified of new performance entries as they are recorded.

Each PerformanceObserver has these associated concepts:

A callback set on creation.
A list of PerformanceEntry objects called the observer buffer that is initially empty.

The PerformanceObserver(callback) constructor must create a new PerformanceObserver object with callback set to callback and then return it.

A registered performance observer consists of an observer (a PerformanceObserver object) and options (a PerformanceObserverInit dictionary).

dictionary PerformanceObserverInit {
    required sequence<DOMString> entryTypes;
};

[Exposed=(Window,Worker)]
interface PerformanceObserverEntryList {
    PerformanceEntryList getEntries();
    PerformanceEntryList getEntriesByType(DOMString type);
    PerformanceEntryList getEntriesByName(DOMString name,
                                          optional DOMString type);
};

callback PerformanceObserverCallback = void (PerformanceObserverEntryList entries,
                                             PerformanceObserver observer);

[Constructor(PerformanceObserverCallback callback),
 Exposed=(Window,Worker)]
interface PerformanceObserver {
    void observe(PerformanceObserverInit options);
    void disconnect();
};

PerformanceObserverInit.entryTypes is a list of valid entryType names to be observed. The list MUST NOT be empty and types not recognized by the user agent MUST be ignored.

Note

To keep the performance overhead to minimum the application should only subscribe to event types that it is interested in, and disconnect the observer once it no longer needs to observe the performance data. Filtering by name is not supported, as it would implicitly require a subscription for all event types — this is possible, but discouraged, as it will generate a significant volume of events.

The PerformanceObserverEntryList interface provides the same getEntries, getEntriesByType, getEntriesByName methods as the Performance interface, except that PerformanceObserverEntryList operates on the observed emitted list of events instead of the global timeline.

The observe method instructs the user agent to register the observer and must run these steps:

If options' entryTypes attribute is not present, throw a JavaScript TypeError.
Filter unsupported entryType entryType names within the entryTypes sequence, and replace the entryTypes sequence with the new filtered sequence.
If the options' entryTypes attribute is an empty sequence, throw a JavaScript TypeError.
If the list of registered performance observer objects associated with the ECMAScript global environment of the interface object's contains a registered performance observer that is the context object, replace the context object's options with options.
Otherwise, append a new registered performance observer object to the list of registered performance observer objects associated with the ECMAScript global environment of the interface object, with the context object as observer and options as the options.

The disconnect method must remove the context object from the list of PerformanceObserver objects associated with the ECMAScript global environment of the interface object, and also empty context object's observer buffer.

Performance Timeline Level 2

W3C Working Draft 24 October 2016

Abstract

Status of This Document

1. Introduction

2. Conformance

3. Performance Timeline

3.1 The `PerformanceEntry` interface

3.2 Extensions to the `Performance` interface

3.3 The `PerformanceObserver` interface

4. Processing

4.1 Filter performance entry buffer by `name` and `type`

5. Privacy and Security

A. Acknowledgments

B. References

B.1 Normative references

B.2 Informative references

Abstract

Status of This Document

1. Introduction

2. Conformance

3. Performance Timeline

3.1 The PerformanceEntry interface

3.2 Extensions to the Performance interface

3.3 The PerformanceObserver interface

4. Processing

4.1 Filter performance entry buffer by name and type

5. Privacy and Security

A. Acknowledgments

B. References

B.1 Normative references

B.2 Informative references

3.1 The `PerformanceEntry` interface

3.2 Extensions to the `Performance` interface

3.3 The `PerformanceObserver` interface

4.1 Filter performance entry buffer by `name` and `type`