diff --git a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md
index d71597190b1d3bb..60d51729be1a6d3 100644
--- a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md
@@ -12,42 +12,39 @@ browser-compat: api.PerformanceNavigationTiming.domComplete
{{APIRef("Performance API")}}
-The **`domComplete`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the
-time immediately before the user agent sets the current document readiness of the
-current document to _[complete](https://html.spec.whatwg.org/multipage/syntax.html#the-end)_.
+The **`domComplete`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"complete"`.
+
+See also the `complete` state of {{domxref("Document.readyState")}} which corresponds to this property and refers to the state in which the document and all sub-resources have finished loading. The state also indicates that the {{domxref("Window/load_event", "load")}} event is about to fire.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing a time value equal to the
-time immediately before the user agent sets the current document readiness of the
-current document to _[complete](https://html.spec.whatwg.org/multipage/syntax.html#the-end)_.
+A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"complete"`.
## Examples
-The following example illustrates this property's usage.
+### Logging DOM completion time
+
+The `domComplete` property can be used to log the time when the DOM is complete.
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
+});
```
## Specifications
@@ -57,3 +54,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- {{domxref("Document.readyState")}}
diff --git a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md
index 6e503ffb040abc8..73819ab1131784c 100644
--- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md
@@ -12,42 +12,47 @@ browser-compat: api.PerformanceNavigationTiming.domContentLoadedEventEnd
{{APIRef("Performance API")}}
-The **`domContentLoadedEventEnd`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the
-time immediately after the current document's [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end)
-event completes.
+The **`domContentLoadedEventEnd`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler completes.
+
+Typically frameworks and libraries wait for the `DOMContentLoaded` event before starting to run their code. We can use the `domContentLoadedEventEnd` and the [`domContentLoadedEventStart`](/en-US/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart) properties to calculate how long this takes to run.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to
-the time immediately after the current document's [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end)
-event completes.
+A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler completes.
## Examples
-The following example illustrates this property's usage.
+### Measuring `DOMContentLoaded` event handler time
+
+The `domContentLoadedEventEnd` property can be used to measure how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler.
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const domContentLoadedTime =
+ entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
+ console.log(
+ `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`
+ );
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const domContentLoadedTime =
+ entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
+ console.log(
+ `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`
+ );
+});
```
## Specifications
@@ -57,3 +62,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [DOMContentLoaded](/en-US/docs/Web/API/Document/DOMContentLoaded_event)
diff --git a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md
index c2c4203ae8b450a..f2fc2adf2bc6d46 100644
--- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md
@@ -12,42 +12,47 @@ browser-compat: api.PerformanceNavigationTiming.domContentLoadedEventStart
{{APIRef("Performance API")}}
-The **`domContentLoadedEventStart`** read-only property returns
-a {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to
-the time immediately before the user agent fires the [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end)
-event at the current document.
+The **`domContentLoadedEventStart`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler starts.
+
+Typically frameworks and libraries wait for the `DOMContentLoaded` event before starting to run their code. We can use the `domContentLoadedEventStart` and the [`domContentLoadedEventEnd`](/en-US/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd) properties to calculate how long this takes to run.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to
-the time immediately before the user agent fires the [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end)
-event at the current document.
+A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler starts.
## Examples
-The following example illustrates this property's usage.
+### Measuring `DOMContentLoaded` event handler time
+
+The `domContentLoadedEventStart` property can be used to measure how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler.
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const domContentLoadedTime =
+ entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
+ console.log(
+ `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`
+ );
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const domContentLoadedTime =
+ entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
+ console.log(
+ `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`
+ );
+});
```
## Specifications
@@ -57,3 +62,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [DOMContentLoaded](/en-US/docs/Web/API/Document/DOMContentLoaded_event)
diff --git a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md
index 6638c9d18ed5836..0ce1503295122e5 100644
--- a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md
@@ -12,42 +12,45 @@ browser-compat: api.PerformanceNavigationTiming.domInteractive
{{APIRef("Performance API")}}
-The **`domInteractive`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the
-time immediately before the user agent sets the current document readiness of the
-current document to [interactive](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
+The **`domInteractive`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"interactive"`.
+
+> **Note:** This property is **not** {{Glossary("Time to interactive")}} (TTI). This property refers to the time when DOM construction is finished and interaction to it from JavaScript is possible. See also the `interactive` state of {{domxref("Document.readyState")}} which corresponds to this property.
+
+Measuring DOM processing time may not be consequential unless your site has a very large HTML source to a construct a Document Object Model from.
+
+If there is no parser-blocking JavaScript then the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event (see [`domContentLoadedEventStart`](/en-US/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart) for the timestamp) will fire immediately after `domInteractive`.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to
-the time immediately before the user agent sets the current document readiness of the
-current document to [interactive](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
+A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"interactive"`.
## Examples
-The following example illustrates this property's usage.
+### Logging DOM interaction time
+
+The `domInteractive` property can be used to log the time when the DOM construction has finished and interaction with it is possible.
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ console.log(
+ `${entry.name}: domInteractive time: ${entry.domInteractive}ms`
+ );
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ console.log(`${entry.name}: domInteractive time: ${entry.domInteractive}ms`);
+});
```
## Specifications
@@ -57,3 +60,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- {{domxref("Document.readyState")}}
diff --git a/files/en-us/web/api/performancenavigationtiming/index.md b/files/en-us/web/api/performancenavigationtiming/index.md
index 9f7b85af91d70f4..6365a402ccc0630 100644
--- a/files/en-us/web/api/performancenavigationtiming/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/index.md
@@ -16,22 +16,28 @@ browser-compat: api.PerformanceNavigationTiming
The **`PerformanceNavigationTiming`** interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.
+Only the current document is included in the performance timeline, so there is only one `PerformanceNavigationTiming` object in the performance timeline. It inherits all of the properties and methods of {{domxref("PerformanceResourceTiming")}} and {{domxref("PerformanceEntry")}}.
+
{{InheritanceDiagram}}
+The following diagram shows all of the timestamp properties defined in `PerformanceNavigationTiming`.
+
+
+
## Instance properties
-This interface extends the following {{domxref('PerformanceEntry')}} properties for navigation performance entry types by qualifying and constraining them as follows:
+This interface extends the following {{domxref('PerformanceEntry')}} properties by qualifying and constraining them as follows:
- {{domxref("PerformanceEntry.entryType")}} {{ReadOnlyInline}}
- : Returns `"navigation"`.
- {{domxref("PerformanceEntry.name")}} {{ReadOnlyInline}}
- - : Returns the [document's address](https://dom.spec.whatwg.org/#concept-document-url).
+ - : Returns the [document's URL](/en-US/docs/Web/API/Document/URL).
- {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}}
- : Returns a {{domxref("DOMHighResTimeStamp")}} with a value of "`0`".
- {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}}
- : Returns a {{domxref("DOMHighResTimeStamp","timestamp")}} that is the difference between the {{domxref("PerformanceNavigationTiming.loadEventEnd")}} and {{domxref("PerformanceEntry.startTime")}} properties.
-This interface also extends following {{domxref('PerformanceResourceTiming')}} properties for navigation performance entry types by qualifying and constraining them as follows:
+This interface also extends the following {{domxref('PerformanceResourceTiming')}} properties by qualifying and constraining them as follows:
- {{domxref('PerformanceResourceTiming.initiatorType')}} {{ReadOnlyInline}}
- : Returns `"navigation"`.
@@ -39,33 +45,25 @@ This interface also extends following {{domxref('PerformanceResourceTiming')}} p
The interface also supports the following properties:
- {{domxref('PerformanceNavigationTiming.domComplete')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing a time value equal to the time immediately before the browser sets the current document readiness of the current document to _[complete](https://html.spec.whatwg.org/multipage/syntax.html#the-end)_.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"complete"`.
- {{domxref('PerformanceNavigationTiming.domContentLoadedEventEnd')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately after the current document's [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end) event completes.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler completes.
- {{domxref('PerformanceNavigationTiming.domContentLoadedEventStart')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately before the user agent fires the [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end) event at the current document.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler starts.
- {{domxref('PerformanceNavigationTiming.domInteractive')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing a {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to [interactive](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"interactive"`.
- {{domxref('PerformanceNavigationTiming.loadEventEnd')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time when the load event of the current document is completed.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`load`](/en-US/docs/Web/API/Window/load_event) event handler completes.
- {{domxref('PerformanceNavigationTiming.loadEventStart')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately before the load event of the current document is fired.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`load`](/en-US/docs/Web/API/Window/load_event) event handler starts.
- {{domxref('PerformanceNavigationTiming.redirectCount')}} {{ReadOnlyInline}}
-
- - : A number representing the number of redirects since the last non-redirect navigation under the current browsing context.
-
- If there was no redirect, or if the redirect was from another origin, and that origin does not permit it's timing information to be exposed to the current origin then the value will be 0.
-
-- {{domxref('PerformanceNavigationTiming.requestStart')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the user agent starts requesting the resource from the server, or from relevant application caches or from local resources.
-- {{domxref('PerformanceNavigationTiming.responseStart')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the user agent's HTTP parser receives the first byte of the response from relevant application caches, or from local resources or from the server.
+ - : A number representing the number of redirects since the last non-redirect navigation in the current browsing context.
- {{domxref('PerformanceNavigationTiming.type')}} {{ReadOnlyInline}}
- - : A string representing the navigation type. Must be: "`navigate`", "`reload`", "`back_forward`" or "`prerender`".
+ - : A string representing the navigation type. Either `"navigate"`, `"reload"`, `"back_forward"` or `"prerender"`.
- {{domxref('PerformanceNavigationTiming.unloadEventEnd')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately after the user agent finishes the unload event of the previous document.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`unload`](/en-US/docs/Web/API/Window/unload_event) event handler completes.
- {{domxref('PerformanceNavigationTiming.unloadEventStart')}} {{ReadOnlyInline}}
- - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately before the user agent starts the unload event of the previous document.
+ - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`unload`](/en-US/docs/Web/API/Window/unload_event) event handler starts.
## Instance methods
diff --git a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md
index 5c6bfca84ec9986..67d60c1119671f6 100644
--- a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md
@@ -12,40 +12,52 @@ browser-compat: api.PerformanceNavigationTiming.loadEventEnd
{{APIRef("Performance API")}}
-The **`loadEventEnd`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} which is equal to the time when the load
-event of the current document is completed.
+The **`loadEventEnd`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`load`](/en-US/docs/Web/API/Window/load_event) event handler completes.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time when the load
-event of the current document is completed.
+A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`load`](/en-US/docs/Web/API/Window/load_event) event handler completes.
## Examples
-The following example illustrates this property's usage.
+### Measuring `load` event handler time
+
+The `loadEventEnd` property can be used to measure how long it takes process the[`load`](/en-US/docs/Web/API/Window/load_event) event handler.
+
+This is useful to measure the time of long running [`load`](/en-US/docs/Web/API/Window/load_event) event handlers.
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+window.addEventListener("load", (event) => {
+ // Some long running code
+});
+```
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
+ if (loadEventTime > 0) {
+ console.log(`${entry.name}: load event handler time: ${loadEventTime}ms`);
+ }
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
+ if (loadEventTime > 0) {
+ console.log(`${entry.name}:
+ load event handler time: ${loadEventTime}ms`);
+ }
+});
```
## Specifications
@@ -55,3 +67,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [`load`](/en-US/docs/Web/API/Window/load_event) event
diff --git a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md
index 97fc7bcc8e47ada..fc1ec48d2693233 100644
--- a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md
@@ -12,40 +12,52 @@ browser-compat: api.PerformanceNavigationTiming.loadEventStart
{{APIRef("Performance API")}}
-The **`loadEventStart`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the
-time immediately before the load event of the current document is fired.
+The **`loadEventStart`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`load`](/en-US/docs/Web/API/Window/load_event) event handler starts.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing a time value equal to the
-time immediately before the load event of the current document is fired.
+A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`load`](/en-US/docs/Web/API/Window/load_event) event handler starts.
## Examples
-The following example illustrates this property's usage.
+### Measuring `load` event handler time
+
+The `loadEventStart` property can be used to measure how long it takes process the[`load`](/en-US/docs/Web/API/Window/load_event) event handler.
+
+This is useful to measure the time of long running [`load`](/en-US/docs/Web/API/Window/load_event) event handlers.
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+window.addEventListener("load", (event) => {
+ // Some long running code
+});
+```
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
+ if (loadEventTime > 0) {
+ console.log(`${entry.name}: load event handler time: ${loadEventTime}ms`);
+ }
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
+ if (loadEventTime > 0) {
+ console.log(`${entry.name}:
+ load event handler time: ${loadEventTime}ms`);
+ }
+});
```
## Specifications
@@ -55,3 +67,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [`load`](/en-US/docs/Web/API/Window/load_event) event
diff --git a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md
index d1fe8b99bf7d502..51b56c51efc7b92 100644
--- a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md
@@ -12,42 +12,62 @@ browser-compat: api.PerformanceNavigationTiming.redirectCount
{{APIRef("Performance API")}}
-The **`redirectCount`** property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the number of redirects
-since the last non-redirect navigation under the current browsing context.
+The **`redirectCount`** read-only property returns a number representing the number of redirects since the last non-redirect navigation in the current browsing context.
-This property is {{ReadOnlyInline}}.
+The higher the number of redirects on a page, the longer the page load time. To improve the performance of your web page, avoid multiple redirects.
+
+The {{domxref("PerformanceResourceTiming.redirectStart", "redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd", "redirectEnd")}} properties can be used to measure redirection time. Note that they will return `0` for cross-origin redirects.
+
+Note that client side redirects, such as `` are not considered here.
## Value
-A number representing the number of redirects since the last non-redirect navigation
-under the current browsing context.
+The `redirectCount` property can have the following values:
+
+- A number representing the number of redirects since the last non-redirect navigation in the current browsing context.
+- `0` if the redirect is cross-origin.
## Examples
-The following example illustrates this property's usage.
+### Logging entries with redirects
+
+The `redirectCount` property can be used to check whether there are one or more redirects. We log the entry's name and the redirection time if it is available.
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const name = entry.name;
+ const redirectCount = entry.redirectCount;
+ const redirectTime = entry.redirectEnd - entry.redirectStart;
+ if (redirectCount > 0) {
+ console.log(`${name}: Redirect count: ${redirectCount}`);
+ if (redirectTime > 0) {
+ console.log(`${name}: Redirect time: ${redirectTime}ms`);
+ }
+ }
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const name = entry.name;
+ const redirectCount = entry.redirectCount;
+ const redirectTime = entry.redirectEnd - entry.redirectStart;
+ if (redirectCount > 0) {
+ console.log(`${name}: Redirect count: ${redirectCount}`);
+ if (redirectTime > 0) {
+ console.log(`${name}: Redirect time: ${redirectTime}ms`);
+ }
+ }
+});
```
## Specifications
@@ -57,3 +77,8 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- {{domxref("PerformanceResourceTiming.redirectStart")}}
+- {{domxref("PerformanceResourceTiming.redirectEnd")}}
diff --git a/files/en-us/web/api/performancenavigationtiming/timestamp-diagram.svg b/files/en-us/web/api/performancenavigationtiming/timestamp-diagram.svg
new file mode 100644
index 000000000000000..0b299082ce7d8f2
--- /dev/null
+++ b/files/en-us/web/api/performancenavigationtiming/timestamp-diagram.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/files/en-us/web/api/performancenavigationtiming/type/index.md b/files/en-us/web/api/performancenavigationtiming/type/index.md
index 659f3e46d0deef2..1ed2c2b4db060a6 100644
--- a/files/en-us/web/api/performancenavigationtiming/type/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/type/index.md
@@ -14,47 +14,54 @@ browser-compat: api.PerformanceNavigationTiming.type
The **`type`** read-only property returns the type of navigation.
+You can use this property to categorize your navigation timing data as each of these types will have different performance characteristics. Users going back and forth might experience a faster site than users performing navigation for the first time or submitting forms, etc.
+
+For example, if your site provides new content frequently, you might want to refresh that content using [Fetch](/en-US/docs/Web/API/Fetch_API) or similar and avoid users having to hit reload for the entire page all the time. The `"reload"` type can help you find pages that are reloaded frequently.
+
## Value
-A string containing one of the following values:
+The `type` property can have the following values:
- `"navigate"`
- - : Navigation started by clicking a link, entering the URL in the browser's address
- bar, form submission, or initializing through a script operation other than reload and
- back_forward as listed below.
+ - : Navigation started by clicking a link, entering the URL in the browser's address bar, form submission, or initializing through a script operation other than `reload` and `back_forward` as listed below.
- `"reload"`
- - : Navigation is through the browser's reload operation or
- {{domxref("location.reload()")}}.
+ - : Navigation is through the browser's reload operation, {{domxref("location.reload()")}} or a Refresh pragma directive like ``.
- `"back_forward"`
- : Navigation is through the browser's history traversal operation.
- `"prerender"`
- - : Navigation is initiated by a [prerender hint](https://www.w3.org/TR/resource-hints/#prerender).
+ - : Navigation is initiated by a [prerender hint](/en-US/docs/Web/HTML/Link_types/prerender).
## Examples
-The following example illustrates this property's usage.
+### Logging reload navigation
+
+The `type` property can be used to check whether the navigation was of type `reload`. You could collect these `reload` entries in a server-side endpoint to determine which pages of your site gets reloaded the most, or collect all navigation types and determine what percent of users go back and forward, for example.
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
+
+```js
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ if (entry.type === "reload") {
+ console.log(`${entry.name} was reloaded!`);
+ console.log(entry);
+ }
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ if (entry.type === "reload") {
+ console.log(`${entry.name} was reloaded!`);
+ console.log(entry);
+ }
+});
```
## Specifications
diff --git a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md
index ade4c5055094702..30b3acca0cc1247 100644
--- a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md
@@ -12,42 +12,58 @@ browser-compat: api.PerformanceNavigationTiming.unloadEventEnd
{{APIRef("Performance API")}}
-The **`unloadEventEnd`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the
-time immediately after the user agent finishes the unload event of the previous
-document. If there is no previous document, this property value is `0`.
+The **`unloadEventEnd`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`unload`](/en-US/docs/Web/API/Window/unload_event) event handler completes.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing a time value equal to the
-time immediately after the user agent finishes the unload event of the previous
-document.
+The `unloadEventEnd` property can have the following values:
+
+- A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the current document's [`unload`](/en-US/docs/Web/API/Window/unload_event) event handler completes.
+- `0` if there is no previous document.
+- `0` if the previous page was on another origin.
## Examples
-The following example illustrates this property's usage.
+### Measuring `unload` event handler time
+
+The `unloadEventEnd` property can be used to measure how long it takes process the[`unload`](/en-US/docs/Web/API/Window/unload_event) event handler.
+
+This is useful to measure the time of long running [`unload`](/en-US/docs/Web/API/Window/load_event) event handlers.
+
+```js
+window.addEventListener("unload", (event) => {
+ // Some long running code
+});
+```
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
+ if (unloadEventTime > 0) {
+ console.log(
+ `${entry.name}: unload event handler time: ${unloadEventTime}ms`
+ );
+ }
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const loadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
+ if (unloadEventTime > 0) {
+ console.log(`${entry.name}:
+ load event handler time: ${unloadEventTime}ms`);
+ }
+});
```
## Specifications
@@ -57,3 +73,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [`unload`](/en-US/docs/Web/API/Window/unload_event) event
diff --git a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md
index 228db2c48ebb4e2..ad622d318a0fa83 100644
--- a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md
+++ b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md
@@ -12,42 +12,58 @@ browser-compat: api.PerformanceNavigationTiming.unloadEventStart
{{APIRef("Performance API")}}
-The **`unloadEventStart`** read-only property returns a
-{{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to the
-time immediately before the user agent starts the unload event of the previous document.
-If there is no previous document, this property returns `0`.
+The **`unloadEventStart`** read-only property returns a {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`unload`](/en-US/docs/Web/API/Window/unload_event) event handler starts.
## Value
-A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time value equal to
-the time immediately before the user agent starts the unload event of the previous
-document.
+The `unloadEventStart` property can have the following values:
+
+- A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the current document's [`unload`](/en-US/docs/Web/API/Window/unload_event) event handler starts.
+- `0` if there is no previous document.
+- `0` if the previous page was on another origin.
## Examples
-The following example illustrates this property's usage.
+### Measuring `unload` event handler time
+
+The `unloadEventStart` property can be used to measure how long it takes process the[`unload`](/en-US/docs/Web/API/Window/unload_event) event handler.
+
+This is useful to measure the time of long running [`unload`](/en-US/docs/Web/API/Window/load_event) event handlers.
+
+```js
+window.addEventListener("unload", (event) => {
+ // Some long running code
+});
+```
+
+Example using a {{domxref("PerformanceObserver")}}, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.
```js
-function printNavTimingData() {
- // Use getEntriesByType() to just get the "navigation" events
- performance.getEntriesByType("navigation")
- .forEach((p, i) => {
- console.log(`= Navigation entry[${i}]`);
-
- // DOM Properties
- console.log(`DOM content loaded = ${p.domContentLoadedEventEnd - p.domContentLoadedEventStart}`);
- console.log(`DOM complete = ${p.domComplete}`);
- console.log(`DOM interactive = ${p.domInteractive}`);
-
- // Document load and unload time
- console.log(`document load = ${p.loadEventEnd - p.loadEventStart}`);
- console.log(`document unload = ${p.unloadEventEnd - p.unloadEventStart}`);
-
- // Other properties
- console.log(`type = ${p.type}`);
- console.log(`redirectCount = ${p.redirectCount}`);
- });
-}
+const observer = new PerformanceObserver((list) => {
+ list.getEntries().forEach((entry) => {
+ const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
+ if (unloadEventTime > 0) {
+ console.log(
+ `${entry.name}: unload event handler time: ${unloadEventTime}ms`
+ );
+ }
+ });
+});
+
+observer.observe({ type: "navigation", buffered: true });
+```
+
+Example using {{domxref("Performance.getEntriesByType()")}}, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+const entries = performance.getEntriesByType("navigation");
+entries.forEach((entry) => {
+ const loadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
+ if (unloadEventTime > 0) {
+ console.log(`${entry.name}:
+ load event handler time: ${unloadEventTime}ms`);
+ }
+});
```
## Specifications
@@ -57,3 +73,7 @@ function printNavTimingData() {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [`unload`](/en-US/docs/Web/API/Window/unload_event) event