mdn · hamishwillee · Sep 7, 2026
@@ -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

@@ -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
 

@@ -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

@@ -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.

@@ -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

@@ -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).
 

@@ -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).
 

@@ -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
 

@@ -112,6 +112,6 @@ entries.forEach((entry) => {
 
 {{Compat}}
 
-### See also
+## See also
 
 - {{domxref("LargestContentfulPaint")}}