diff --git a/files/en-us/web/api/performanceelementtiming/index.md b/files/en-us/web/api/performanceelementtiming/index.md index 7173f8d192dbc19..33e1c81319b03ef 100644 --- a/files/en-us/web/api/performanceelementtiming/index.md +++ b/files/en-us/web/api/performanceelementtiming/index.md @@ -11,20 +11,6 @@ browser-compat: api.PerformanceElementTiming The **`PerformanceElementTiming`** interface contains render timing information for image and text node elements the developer annotated with an [`elementtiming`](/en-US/docs/Web/HTML/Reference/Attributes/elementtiming) attribute for observation. -## Description - -The aim of the Element Timing API is to give web developers or analytics tools the ability to measure rendering timestamps of critical elements on a page. - -The API supports timing information on the following elements: - -- {{htmlelement("img")}} elements, -- {{SVGElement("image")}} elements inside an {{SVGElement("svg")}}, -- [poster](/en-US/docs/Web/HTML/Reference/Elements/video#poster) images of {{htmlelement("video")}} elements, -- elements which have a contentful {{cssxref("background-image")}} property with a URL value for a resource that is actually available, and -- groups of text nodes, such as a {{htmlelement("p")}}. - -The author flags an element for observation by adding the [`elementtiming`](/en-US/docs/Web/HTML/Reference/Attributes/elementtiming) attribute on the element. - `PerformanceElementTiming` inherits from {{domxref("PerformanceEntry")}}. {{InheritanceDiagram}} @@ -72,6 +58,20 @@ It also extends the following {{domxref("PerformanceEntry")}} properties, qualif - {{domxref("PerformanceElementTiming.toJSON()")}} {{Experimental_Inline}} - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceElementTiming` object. +## Description + +The aim of the Element Timing API is to give web developers or analytics tools the ability to measure rendering timestamps of critical elements on a page. + +The API supports timing information on the following elements: + +- {{htmlelement("img")}} elements, +- {{SVGElement("image")}} elements inside an {{SVGElement("svg")}}, +- [poster](/en-US/docs/Web/HTML/Reference/Elements/video#poster) images of {{htmlelement("video")}} elements, +- elements which have a contentful {{cssxref("background-image")}} property with a URL value for a resource that is actually available, and +- groups of text nodes, such as a {{htmlelement("p")}}. + +The author flags an element for observation by adding the [`elementtiming`](/en-US/docs/Web/HTML/Reference/Attributes/elementtiming) attribute on the element. + ## Examples ### Observing render time of specific elements diff --git a/files/en-us/web/api/performanceentry/index.md b/files/en-us/web/api/performanceentry/index.md index aa6d1efe3599c6e..183a52c59caf760 100644 --- a/files/en-us/web/api/performanceentry/index.md +++ b/files/en-us/web/api/performanceentry/index.md @@ -51,7 +51,7 @@ The `PerformanceEntry` instances will always be one of the following subclasses: - {{domxref("PerformanceEntry.toJSON","PerformanceEntry.toJSON()")}} - : Returns a JSON representation of the `PerformanceEntry` object. -## Example +## Examples ### Working with performance entries diff --git a/files/en-us/web/api/performanceeventtiming/index.md b/files/en-us/web/api/performanceeventtiming/index.md index b639c3c94e4703c..f55c4c5afcd5e3c 100644 --- a/files/en-us/web/api/performanceeventtiming/index.md +++ b/files/en-us/web/api/performanceeventtiming/index.md @@ -9,6 +9,45 @@ browser-compat: api.PerformanceEventTiming The `PerformanceEventTiming` interface of the Event Timing API provides insights into the latency of certain event types triggered by user interaction. +This interface inherits methods and properties from its parent, {{domxref("PerformanceEntry")}}: + +{{InheritanceDiagram}} + +## Constructor + +This interface has no constructor on its own. See the [example below](#getting_event_timing_information) for how to typically get the information the `PerformanceEventTiming` interface holds. + +## Instance properties + +This interface extends the following {{domxref("PerformanceEntry")}} properties for event timing performance entry types by qualifying them as follows: + +- {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}} + - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the time from `startTime` to the next rendering paint (rounded to the nearest 8ms). +- {{domxref("PerformanceEntry.entryType")}} {{ReadOnlyInline}} + - : Returns `"event"` (for long events) or `"first-input"` (for the first user interaction). +- {{domxref("PerformanceEntry.name")}} {{ReadOnlyInline}} + - : Returns the associated event's type. +- {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}} + - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the associated event's [`timestamp`](/en-US/docs/Web/API/Event/timeStamp) property. This is the time the event was created and can be considered as a proxy for the time the user interaction occurred. + +This interface also supports the following properties: + +- {{domxref("PerformanceEventTiming.cancelable")}} {{ReadOnlyInline}} + - : Returns the associated event's [`cancelable`](/en-US/docs/Web/API/Event/cancelable) property. +- {{domxref("PerformanceEventTiming.interactionId")}} {{ReadOnlyInline}} + - : Returns the ID that uniquely identifies the user interaction which triggered the associated event. +- {{domxref("PerformanceEventTiming.processingStart")}} {{ReadOnlyInline}} + - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the time at which event dispatch started. To measure the time between a user action and the time the event handler starts to run, calculate `processingStart-startTime`. +- {{domxref("PerformanceEventTiming.processingEnd")}} {{ReadOnlyInline}} + - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the time at which the event dispatch ended. To measure the time the event handler took to run, calculate `processingEnd-processingStart`. +- {{domxref("PerformanceEventTiming.target")}} {{ReadOnlyInline}} + - : Returns the associated event's last target, if it is not removed. + +## Instance methods + +- {{domxref("PerformanceEventTiming.toJSON()")}} + - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceEventTiming` object. + ## Description This API enables visibility into slow events by providing event timestamps and duration for certain event types ([see below](#events_exposed)). For example, you can monitor the time between a user action and the start of its event handler, or the time an event handler takes to run. @@ -20,10 +59,6 @@ You typically work with `PerformanceEventTiming` objects by creating a {{domxref By default, `PerformanceEventTiming` entries are exposed when their `duration` is 104ms or greater. Research suggests that user input that is not handled within 100ms is considered slow and 104ms is the first multiple of 8 greater than 100ms (for security reasons, this API is rounded to the nearest multiple of 8ms). However, you can set the {{domxref("PerformanceObserver")}} to a different threshold using the `durationThreshold` option in the [`observe()`](/en-US/docs/Web/API/PerformanceObserver/observe) method. -This interface inherits methods and properties from its parent, {{domxref("PerformanceEntry")}}: - -{{InheritanceDiagram}} - ### Events exposed The following event types are exposed by the Event Timing API: @@ -118,41 +153,6 @@ To get a list of all exposed events, you can also look up keys in the {{domxref( const exposedEventsList = [...performance.eventCounts.keys()]; ``` -## Constructor - -This interface has no constructor on its own. See the [example below](#getting_event_timing_information) for how to typically get the information the `PerformanceEventTiming` interface holds. - -## Instance properties - -This interface extends the following {{domxref("PerformanceEntry")}} properties for event timing performance entry types by qualifying them as follows: - -- {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}} - - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the time from `startTime` to the next rendering paint (rounded to the nearest 8ms). -- {{domxref("PerformanceEntry.entryType")}} {{ReadOnlyInline}} - - : Returns `"event"` (for long events) or `"first-input"` (for the first user interaction). -- {{domxref("PerformanceEntry.name")}} {{ReadOnlyInline}} - - : Returns the associated event's type. -- {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}} - - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the associated event's [`timestamp`](/en-US/docs/Web/API/Event/timeStamp) property. This is the time the event was created and can be considered as a proxy for the time the user interaction occurred. - -This interface also supports the following properties: - -- {{domxref("PerformanceEventTiming.cancelable")}} {{ReadOnlyInline}} - - : Returns the associated event's [`cancelable`](/en-US/docs/Web/API/Event/cancelable) property. -- {{domxref("PerformanceEventTiming.interactionId")}} {{ReadOnlyInline}} - - : Returns the ID that uniquely identifies the user interaction which triggered the associated event. -- {{domxref("PerformanceEventTiming.processingStart")}} {{ReadOnlyInline}} - - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the time at which event dispatch started. To measure the time between a user action and the time the event handler starts to run, calculate `processingStart-startTime`. -- {{domxref("PerformanceEventTiming.processingEnd")}} {{ReadOnlyInline}} - - : Returns a {{domxref("DOMHighResTimeStamp")}} representing the time at which the event dispatch ended. To measure the time the event handler took to run, calculate `processingEnd-processingStart`. -- {{domxref("PerformanceEventTiming.target")}} {{ReadOnlyInline}} - - : Returns the associated event's last target, if it is not removed. - -## Instance methods - -- {{domxref("PerformanceEventTiming.toJSON()")}} - - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceEventTiming` object. - ## Examples ### Getting event timing information diff --git a/files/en-us/web/api/performancelonganimationframetiming/index.md b/files/en-us/web/api/performancelonganimationframetiming/index.md index 6f17c93ae272ccd..311658f78ddf0f7 100644 --- a/files/en-us/web/api/performancelonganimationframetiming/index.md +++ b/files/en-us/web/api/performancelonganimationframetiming/index.md @@ -11,15 +11,6 @@ browser-compat: api.PerformanceLongAnimationFrameTiming The **`PerformanceLongAnimationFrameTiming`** interface is specified in the Long Animation Frames API and provides metrics on long animation frames (LoAFs) that occupy rendering and block other tasks from being executed. -## Description - -Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causing [janky](/en-US/docs/Glossary/Jank) (non-smooth) animated effects and scrolling. This often leads to user frustration. - -The `PerformanceLongAnimationFrameTiming` interface provides the following granular set of information on LoAFs, allowing developers to narrow down their root causes: - -- A detailed set of timestamps for each LoAF. -- Detailed information on each script that contributed to creating the LoAF, via the {{domxref("PerformanceLongAnimationFrameTiming.scripts")}} property. This returns an array of {{domxref("PerformanceScriptTiming")}} objects, one for each script. - `PerformanceLongAnimationFrameTiming` inherits from {{domxref("PerformanceEntry")}}. {{InheritanceDiagram}} @@ -59,6 +50,15 @@ It also extends the following {{domxref("PerformanceEntry")}} properties, qualif - {{domxref("PerformanceLongAnimationFrameTiming.toJSON()")}} {{Experimental_Inline}} - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceLongAnimationFrameTiming` object. +## Description + +Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causing [janky](/en-US/docs/Glossary/Jank) (non-smooth) animated effects and scrolling. This often leads to user frustration. + +The `PerformanceLongAnimationFrameTiming` interface provides the following granular set of information on LoAFs, allowing developers to narrow down their root causes: + +- A detailed set of timestamps for each LoAF. +- Detailed information on each script that contributed to creating the LoAF, via the {{domxref("PerformanceLongAnimationFrameTiming.scripts")}} property. This returns an array of {{domxref("PerformanceScriptTiming")}} objects, one for each script. + ## Examples See [Long animation frame timing](/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing#examples) for examples related to the Long Animation Frames API. diff --git a/files/en-us/web/api/performancelongtasktiming/index.md b/files/en-us/web/api/performancelongtasktiming/index.md index bea9df28e370d65..27d6e25c75896b5 100644 --- a/files/en-us/web/api/performancelongtasktiming/index.md +++ b/files/en-us/web/api/performancelongtasktiming/index.md @@ -11,25 +11,6 @@ browser-compat: api.PerformanceLongTaskTiming The **`PerformanceLongTaskTiming`** interface provides information about tasks that occupy the UI thread for 50 milliseconds or more. -## Description - -Long tasks that block the main thread for 50ms or more cause, among other issues: - -- Delayed {{glossary("Time to interactive")}} (TTI). -- High/variable input latency. -- High/variable event handling latency. -- Janky animations and scrolling. - -A long task is any uninterrupted period where the main UI thread is busy for 50ms or longer. Common examples include: - -- Long-running event handlers. -- Expensive reflows and other re-renders. -- Work the browser does between different turns of the event loop that exceeds 50 ms. - -Long tasks refer to "culprit browsing context container", or "the container" for short, which is the top-level page, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} or {{HTMLElement("object")}} that the task occurred within. - -For tasks that don't occur within the top-level page and for figuring out which container is responsible for the long task, the {{domxref("TaskAttributionTiming")}} interface provides the `containerId`, `containerName` and `containerSrc` properties, which may provide more information about the source of the task. - `PerformanceLongTaskTiming` inherits from {{domxref("PerformanceEntry")}}. {{InheritanceDiagram}} @@ -66,6 +47,25 @@ This interface also supports the following properties: - {{domxref("PerformanceLongTaskTiming.toJSON()")}} {{Experimental_Inline}} - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceLongTaskTiming` object. +## Description + +Long tasks that block the main thread for 50ms or more cause, among other issues: + +- Delayed {{glossary("Time to interactive")}} (TTI). +- High/variable input latency. +- High/variable event handling latency. +- Janky animations and scrolling. + +A long task is any uninterrupted period where the main UI thread is busy for 50ms or longer. Common examples include: + +- Long-running event handlers. +- Expensive reflows and other re-renders. +- Work the browser does between different turns of the event loop that exceeds 50 ms. + +Long tasks refer to "culprit browsing context container", or "the container" for short, which is the top-level page, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} or {{HTMLElement("object")}} that the task occurred within. + +For tasks that don't occur within the top-level page and for figuring out which container is responsible for the long task, the {{domxref("TaskAttributionTiming")}} interface provides the `containerId`, `containerName` and `containerSrc` properties, which may provide more information about the source of the task. + ## Examples ### Getting long tasks diff --git a/files/en-us/web/api/performancemark/index.md b/files/en-us/web/api/performancemark/index.md index 56a612905d14f42..28e76ed7f116029 100644 --- a/files/en-us/web/api/performancemark/index.md +++ b/files/en-us/web/api/performancemark/index.md @@ -38,7 +38,7 @@ This interface extends the following {{domxref("PerformanceEntry")}} properties This interface has no methods. -## Example +## Examples See the example in [Using the User Timing API](/en-US/docs/Web/API/Performance_API/User_timing). diff --git a/files/en-us/web/api/performancemeasure/index.md b/files/en-us/web/api/performancemeasure/index.md index 5c85db6bb5da6a5..241430c464e712b 100644 --- a/files/en-us/web/api/performancemeasure/index.md +++ b/files/en-us/web/api/performancemeasure/index.md @@ -31,7 +31,7 @@ This interface extends the following {{domxref("PerformanceEntry")}} properties This interface has no methods. -## Example +## Examples See the example in [Using the User Timing API](/en-US/docs/Web/API/Performance_API/User_timing). diff --git a/files/en-us/web/api/performanceobserverentrylist/index.md b/files/en-us/web/api/performanceobserverentrylist/index.md index b7a90599a4f9ec5..0dca0f7df2e3045 100644 --- a/files/en-us/web/api/performanceobserverentrylist/index.md +++ b/files/en-us/web/api/performanceobserverentrylist/index.md @@ -18,7 +18,7 @@ The **`PerformanceObserverEntryList`** interface is a list of {{domxref("Perform - {{domxref("PerformanceObserverEntryList.getEntriesByName","PerformanceObserverEntryList.getEntriesByName()")}} - : Returns a list of all explicitly observed {{domxref("PerformanceEntry")}} objects based on the given name and entry type. -## Example +## Examples ### Using PerformanceObserverEntryList diff --git a/files/en-us/web/api/performancepainttiming/index.md b/files/en-us/web/api/performancepainttiming/index.md index fcce62429ee1d31..dee51a43ff250d1 100644 --- a/files/en-us/web/api/performancepainttiming/index.md +++ b/files/en-us/web/api/performancepainttiming/index.md @@ -112,6 +112,6 @@ entries.forEach((entry) => { {{Compat}} -### See also +## See also - {{domxref("LargestContentfulPaint")}} diff --git a/files/en-us/web/api/performanceresourcetiming/index.md b/files/en-us/web/api/performanceresourcetiming/index.md index eb7a16004797126..e8648f6cc2639fa 100644 --- a/files/en-us/web/api/performanceresourcetiming/index.md +++ b/files/en-us/web/api/performanceresourcetiming/index.md @@ -11,44 +11,6 @@ The **`PerformanceResourceTiming`** interface enables retrieval and analysis of {{InheritanceDiagram}} -## Description - -The interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, and more. Additionally, the interface extends {{domxref("PerformanceEntry")}} with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. - -### Typical resource timing metrics - -The properties of this interface allow you to calculate certain resource timing metrics. Common use cases include: - -- Measuring TCP handshake time (`connectEnd` - `connectStart`) -- Measuring DNS lookup time (`domainLookupEnd` - `domainLookupStart`) -- Measuring redirection time (`redirectEnd` - `redirectStart`) -- Measuring interim request time (`firstInterimResponseStart` - `finalResponseHeadersStart`) -- Measuring request time (`responseStart` - `requestStart`) -- Measuring document request time (`finalResponseHeadersStart` - `requestStart`) -- Measuring TLS negotiation time (`requestStart` - `secureConnectionStart`) -- Measuring time to fetch (without redirects) (`responseEnd` - `fetchStart`) -- Measuring ServiceWorker processing time (`fetchStart` - `workerStart`) -- Checking if content was compressed (`decodedBodySize` should not be `encodedBodySize`) -- Checking if local caches were hit (`transferSize` should be `0`) -- Checking if modern and fast protocols are used (`nextHopProtocol` should be HTTP/2 or HTTP/3) -- Checking if the correct resources are render-blocking (`renderBlockingStatus`) - -### Managing resource buffer sizes - -By default only 250 resource timing entries are buffered. For more information see the [resource buffer sizes](/en-US/docs/Web/API/Performance_API/Resource_timing#managing_resource_buffer_sizes) of the Resource Timing guide. - -### Cross-origin timing information - -Many of the resource timing properties are restricted to return `0` or an empty string when the resource is a cross-origin request. To expose cross-origin timing information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set. - -The properties which are returned as `0` by default when loading a resource from an origin other than the one of the web page itself: `redirectStart`, `redirectEnd`, `domainLookupStart`, `domainLookupEnd`, `connectStart`, `connectEnd`, `secureConnectionStart`, `requestStart`, and `responseStart`. - -For example, to allow `https://developer.mozilla.org` to see resource timing information, the cross-origin resource should send: - -```http -Timing-Allow-Origin: https://developer.mozilla.org -``` - ## Instance properties ### Inherited from `PerformanceEntry` @@ -129,6 +91,44 @@ Additionally, this interface exposes the following properties containing more in - {{domxref("PerformanceResourceTiming.toJSON()")}} - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceResourceTiming` object. +## Description + +The interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, and more. Additionally, the interface extends {{domxref("PerformanceEntry")}} with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. + +### Typical resource timing metrics + +The properties of this interface allow you to calculate certain resource timing metrics. Common use cases include: + +- Measuring TCP handshake time (`connectEnd` - `connectStart`) +- Measuring DNS lookup time (`domainLookupEnd` - `domainLookupStart`) +- Measuring redirection time (`redirectEnd` - `redirectStart`) +- Measuring interim request time (`firstInterimResponseStart` - `finalResponseHeadersStart`) +- Measuring request time (`responseStart` - `requestStart`) +- Measuring document request time (`finalResponseHeadersStart` - `requestStart`) +- Measuring TLS negotiation time (`requestStart` - `secureConnectionStart`) +- Measuring time to fetch (without redirects) (`responseEnd` - `fetchStart`) +- Measuring ServiceWorker processing time (`fetchStart` - `workerStart`) +- Checking if content was compressed (`decodedBodySize` should not be `encodedBodySize`) +- Checking if local caches were hit (`transferSize` should be `0`) +- Checking if modern and fast protocols are used (`nextHopProtocol` should be HTTP/2 or HTTP/3) +- Checking if the correct resources are render-blocking (`renderBlockingStatus`) + +### Managing resource buffer sizes + +By default only 250 resource timing entries are buffered. For more information see the [resource buffer sizes](/en-US/docs/Web/API/Performance_API/Resource_timing#managing_resource_buffer_sizes) of the Resource Timing guide. + +### Cross-origin timing information + +Many of the resource timing properties are restricted to return `0` or an empty string when the resource is a cross-origin request. To expose cross-origin timing information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set. + +The properties which are returned as `0` by default when loading a resource from an origin other than the one of the web page itself: `redirectStart`, `redirectEnd`, `domainLookupStart`, `domainLookupEnd`, `connectStart`, `connectEnd`, `secureConnectionStart`, `requestStart`, and `responseStart`. + +For example, to allow `https://developer.mozilla.org` to see resource timing information, the cross-origin resource should send: + +```http +Timing-Allow-Origin: https://developer.mozilla.org +``` + ## Examples ### Logging resource timing information diff --git a/files/en-us/web/api/performancescripttiming/index.md b/files/en-us/web/api/performancescripttiming/index.md index cac9488ff757815..4b188377e3edc6c 100644 --- a/files/en-us/web/api/performancescripttiming/index.md +++ b/files/en-us/web/api/performancescripttiming/index.md @@ -11,16 +11,6 @@ browser-compat: api.PerformanceScriptTiming The **`PerformanceScriptTiming`** interface is specified in the Long Animation Frames API and provides metrics on individual scripts that contribute to long animation frames (LoAFs). -## Description - -Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causing [janky](/en-US/docs/Glossary/Jank) (non-smooth) animated effects and scrolling. This often leads to user frustration. - -The `PerformanceScriptTiming` interface (instances of which are accessed via the {{domxref("PerformanceLongAnimationFrameTiming.scripts")}} property) provides the following granular set of information on individual scripts that contribute to LoAFs, allowing developers to narrow down their root causes: - -- A detailed set of timestamps for each script. -- The identity and type of the invoker, i.e., the feature that, when invoked, ran the script. -- Detailed information on each script source file, including the URL, and the function name and character position that contributed to the LoAF. - `PerformanceScriptTiming` inherits from {{domxref("PerformanceEntry")}}. {{InheritanceDiagram}} @@ -66,6 +56,16 @@ This interface also supports the following properties: - {{domxref("PerformanceScriptTiming.toJSON()")}} {{Experimental_Inline}} - : Overrides the {{domxref("PerformanceEntry.toJSON()")}} method to return a JSON representation of the `PerformanceScriptTiming` object. +## Description + +Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causing [janky](/en-US/docs/Glossary/Jank) (non-smooth) animated effects and scrolling. This often leads to user frustration. + +The `PerformanceScriptTiming` interface (instances of which are accessed via the {{domxref("PerformanceLongAnimationFrameTiming.scripts")}} property) provides the following granular set of information on individual scripts that contribute to LoAFs, allowing developers to narrow down their root causes: + +- A detailed set of timestamps for each script. +- The identity and type of the invoker, i.e., the feature that, when invoked, ran the script. +- Detailed information on each script source file, including the URL, and the function name and character position that contributed to the LoAF. + ## Examples See [Long animation frame timing](/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing#examples) for examples related to the Long Animation Frames API. diff --git a/files/en-us/web/api/performanceservertiming/index.md b/files/en-us/web/api/performanceservertiming/index.md index 266eadd4f550479..6ca5608488f65e5 100644 --- a/files/en-us/web/api/performanceservertiming/index.md +++ b/files/en-us/web/api/performanceservertiming/index.md @@ -25,7 +25,7 @@ This interface is restricted to the same origin, but you can use the {{HTTPHeade - {{domxref('PerformanceServerTiming.toJSON()')}} - : Returns a JSON representation of the `PerformanceServerTiming` object. -## Example +## Examples Given a server that sends the {{HTTPHeader("Server-Timing")}} header, for example a Node.js server like this: