Javascript Methods from Performance Timeline API

Written by mozilla | Published 2020/06/01
Tech Story Tags: hackernoon-top-story | tutorial | mozilla | website-development | web-development | performance | mdn-documentation | javascript

TLDR Performance Timeline API defines extensions to the Performance interface to support client-side latency measurements within applications. 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. The PerformanceEntry interface encapsulates a single performance entry — that is, a single data point or metric in the performance timeline. This document provides an overview of the standard's interfaces.via the TL;DR App

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.
This document provides an overview of the standard's interfaces. For
more details about the interfaces, see the reference pages and Using Performance Timeline.

Performance extensions


The Performance Timeline API extends the
Performance
interface with three methods that provide different mechanisms to get a set of
performance records (metrics)
, depending on the specified filter criteria. The methods are:
Returns all recorded
performance entries
or, optionally, the entries based on the specified
name
,
performance type
and/or the
initiatorType
(such as an HTML element).
Returns the recorded
performance entries
based on the specified name and optionally the
performance type
.
Returns the recorded
performance entries
based on the specified
performance type
.

PerformanceEntry interface

The
PerformanceEntry
interface encapsulates a single performance entry — that is, a single data point or metric in the performance timeline. This interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as
PerformanceMark
):
The name of the performance entry when the metric was created.
The type of performance metric (for example, "
mark
").
A
high resolution timestamp
representing the starting time for the performance entry.
A high resolution timestamp representing the time value of the duration of the performance event. (Some performance entry types have no concept of duration and this value is set to '
0
' for such types.)

This interface includes a
toJSON()
method that returns the serialization of the
PerformanceEntry
object. The serialization is specific to the performance entry's
type
.

Performance observers

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's callback function that was specified when the observer was created.
When the observer (callback) is invoked, the callback's parameters include a
performance observer entry list
that contains only observed
performance entries
. That is, the list contains entries only for the event types that were specified when the observer's
observe()
method was invoked. The
performance observer entry list
interface has the same three getEntries*() methods as the
Performance
interface. However, note there is one key difference with these methods; the
performance observer entry list
versions are used to retrieve observed performance entries within the observer callback.
Besides the
PerformanceObserver's
interface's
observe()
method (which is used to register the
entry types
to observe), the
PerformanceObserver
interface also has a
disconnect()
method that stops an observer from receiving further events.
Performance observers were added to the Level 2 version of the standard and were not widely implemented.

Implementation status

A summary of the interfaces' implementation status is provided below, including a link to more detailed information.
  • Performance interface extensions: As shown in the
    Performance
    interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices.
  • PerformanceEntry: As shown in the
    PerformanceEntry
    interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices.
  • Performance Observers : As shown in the
    PerformanceObserver
    interface's Browser Compatibility table, this interface has no shipping implementations.
To test your browser's support for these interfaces, run the
perf-api-support
application.

See Also

    Credits


    Written by mozilla | Mozilla (stylized as moz://a) is a free software community founded in 1998 by members of Netscape.
    Published by HackerNoon on 2020/06/01