From cc82b3330aeee0d8012686f82f5996351b3abf48 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Fri, 2 Dec 2022 18:57:38 +0100 Subject: [PATCH 1/4] Rewrite PerformanceNavigationTiming pages --- .../domcomplete/index.md | 43 +++++--------- .../domcontentloadedeventend/index.md | 45 ++++++-------- .../domcontentloadedeventstart/index.md | 45 ++++++-------- .../dominteractive/index.md | 47 ++++++--------- .../api/performancenavigationtiming/index.md | 26 ++++----- .../loadeventend/index.md | 52 ++++++++--------- .../loadeventstart/index.md | 52 ++++++++--------- .../redirectcount/index.md | 57 +++++++++--------- .../timestamp-diagram.svg | 1 + .../performancenavigationtiming/type/index.md | 48 +++++++-------- .../unloadeventend/index.md | 58 ++++++++++--------- .../unloadeventstart/index.md | 58 ++++++++++--------- 12 files changed, 243 insertions(+), 289 deletions(-) create mode 100644 files/en-us/web/api/performancenavigationtiming/timestamp-diagram.svg diff --git a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md index d71597190b1d3bb..4e9decdd285fe44 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md @@ -12,42 +12,25 @@ 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","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`](/en-US/docs/Web/API/Document/readyState). + +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","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`](/en-US/docs/Web/API/Document/readyState). ## Examples -The following example illustrates this property's usage. +### Logging DOM completion time + +The following example logs the time when the DOM is complete. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + console.log(entry.domComplete); +}); ``` ## Specifications @@ -57,3 +40,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..ce629e5d849a5f2 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md @@ -12,42 +12,27 @@ 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","timestamp")}} representing the time value equal to the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event 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","timestamp")}} representing the time value equal to the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event completes. ## Examples -The following example illustrates this property's usage. +### Measuring `DOMContentLoaded` processing time + +The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; + console.log(`${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`); + } +}); ``` ## Specifications @@ -57,3 +42,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..32f96bd897710c7 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md @@ -12,42 +12,27 @@ 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","timestamp")}} representing the time value equal to the time immediately before the user agent fires the [DOMContentLoaded](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event at the current document. + +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","timestamp")}} representing the time value equal to the time immediately before the user agent fires the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event at the current document. ## Examples -The following example illustrates this property's usage. +### Measuring `DOMContentLoaded` processing time + +The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; + console.log(`${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`); + } +}); ``` ## Specifications @@ -57,3 +42,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..107b0d10551ae09 100644 --- a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md +++ b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md @@ -12,42 +12,29 @@ 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","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`](/en-US/docs/Web/API/Document/readyState). + +> **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","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`](/en-US/docs/Web/API/Document/readyState). ## Examples -The following example illustrates this property's usage. +### Logging DOM interaction time + +The following example logs the time when the DOM construction has finished and interaction with it is possible. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + console.log(entry.domInteractive); +}); ``` ## Specifications @@ -57,3 +44,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..20705198efa6de0 100644 --- a/files/en-us/web/api/performancenavigationtiming/index.md +++ b/files/en-us/web/api/performancenavigationtiming/index.md @@ -16,8 +16,14 @@ 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 from {{domxref("PerformanceResourceTiming")}} and {{domxref("PerformanceEntry")}}. + {{InheritanceDiagram}} +The following diagram shows all of the timestamp properties defined in `PerformanceNavigationTiming`. + +![Timestamp diagram listing timestamps in the order in which they are recorded for the fetching of a document](timestamp-diagram.svg) + ## Instance properties This interface extends the following {{domxref('PerformanceEntry')}} properties for navigation performance entry types by qualifying and constraining them as follows: @@ -25,7 +31,7 @@ This interface extends the following {{domxref('PerformanceEntry')}} properties - {{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](https://dom.spec.whatwg.org/#concept-document-url). - {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}} - : Returns a {{domxref("DOMHighResTimeStamp")}} with a value of "`0`". - {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}} @@ -39,29 +45,21 @@ 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 a time value equal to the time immediately before the browser sets the current document readiness of the current document to [`complete`](/en-US/docs/Web/API/Document/readyState). - {{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 value equal to the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event)) event 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 value equal to the time immediately before the user agent fires the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event at the current document. - {{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 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`](/en-US/docs/Web/API/Document/readyState). - {{domxref('PerformanceNavigationTiming.loadEventEnd')}} {{ReadOnlyInline}} - : A {{domxref("DOMHighResTimeStamp")}} representing the time when the load event of the current document is completed. - {{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. - {{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. - {{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. - {{domxref('PerformanceNavigationTiming.unloadEventStart')}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md index 5c6bfca84ec9986..a79f6e1ee72d58f 100644 --- a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md @@ -12,40 +12,36 @@ 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","timestamp")}} which is equal to the time when the load event of the current document is completed. ## Value -A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time when the load -event of the current document is completed. +A {{domxref("DOMHighResTimeStamp","timestamp")}} representing the time when the load event of the current document is completed. ## Examples -The following example illustrates this property's usage. +### Measuring document loading time + +The following example measures how long it takes to load a document. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + const loadingTime = entry.loadEventEnd - entry.loadEventStart; + if (loadingTime > 0) { + console.log(`${entry.name}: + Document loading time: ${loadingTime}ms`); + } +}); +``` + +This is especially useful if a (potentially long-running) [`load`](/en-US/docs/Web/API/Window/load_event) event is used. + +```js +window.addEventListener("load", (event) => { + // Some code the browser must run + // when loading the document +}); ``` ## Specifications @@ -55,3 +51,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..e1c981cfce599b0 100644 --- a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md @@ -12,40 +12,36 @@ 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","timestamp")}} representing the time value equal to the time immediately before the load event of the current document is fired. ## 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","timestamp")}} representing a time value equal to the time immediately before the load event of the current document is fired. ## Examples -The following example illustrates this property's usage. +### Measuring document loading time + +The following example measures how long it takes to load a document. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + const loadingTime = entry.loadEventEnd - entry.loadEventStart; + if (loadingTime > 0) { + console.log(`${entry.name}: + Document loading time: ${loadingTime}ms`); + } +}); +``` + +This is especially useful if a (potentially long-running) [`load`](/en-US/docs/Web/API/Window/load_event) event is used. + +```js +window.addEventListener("load", (event) => { + // Some code the browser must run + // when loading the document +}); ``` ## Specifications @@ -55,3 +51,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..4a5d57835ccc190 100644 --- a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md +++ b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md @@ -12,42 +12,40 @@ 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 number representing the amount of redirects since the last non-redirect navigation in the current browsing context. -This property is {{ReadOnlyInline}}. +The higher the amount of redirects on a page, the higher is the page load time. You want to avoid multiple redirects to improve the performance of your web page. + +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 amount 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 following example checks if there are one or more redirects and logs the entry's name and the redirection time if available. ```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 resources = performance.getEntriesByType("navigation"); +resources.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 +55,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..90dbdfb93591638 100644 --- a/files/en-us/web/api/performancenavigationtiming/type/index.md +++ b/files/en-us/web/api/performancenavigationtiming/type/index.md @@ -14,49 +14,41 @@ 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 following example checks if the navigation was of type `reload` and logs the entry to the console. ```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 resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + if (entry.type === "reload") { + console.log(`${entry.name} was reloaded!`); + console.log(entry); + } +}); ``` +You could collect `reload` entries in a sever-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-forth, for example. + ## Specifications {{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..e6ae83237609c00 100644 --- a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md @@ -12,42 +12,40 @@ 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","timestamp")}} representing the time value equal to the time immediately after the user agent finishes the unload event of the previous document. ## 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","timestamp")}} representing a time value equal to the time immediately after the user agent finishes the unload event of the previous document. +- `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 document unloading time + +The following example measures how long it takes to unload a document. + +```js +const resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + const unloadingTime = entry.unloadEventEnd - entry.unloadEventStart; + if (unloadingTime > 0) { + console.log(`${entry.name}: + Document unloading time: ${unloadingTime}ms`); + } +}); +``` + +This is especially useful if a (potentially long-running) [`unload`](/en-US/docs/Web/API/Window/unload_event) event is used. ```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("unload", (event) => { + // Some code the browser must run + // before it can navigate to the next page +}); ``` ## Specifications @@ -57,3 +55,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..8b64bf1d2536fd8 100644 --- a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md @@ -12,42 +12,40 @@ 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","timestamp")}} representing the time value equal to the time immediately before the user agent starts the unload event of the previous document. ## 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","timestamp")}} representing the time value equal to the time immediately before the user agent starts the unload event of the previous document. +- `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 document unloading time + +The following example measures how long it takes to unload a document. + +```js +const resources = performance.getEntriesByType("navigation"); +resources.forEach((entry) => { + const unloadingTime = entry.unloadEventEnd - entry.unloadEventStart; + if (unloadingTime > 0) { + console.log(`${entry.name}: + Document unloading time: ${unloadingTime}ms`); + } +}); +``` + +This is especially useful if a (potentially long-running) [`unload`](/en-US/docs/Web/API/Window/unload_event) event is used. ```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("unload", (event) => { + // Some code the browser must run + // before it can navigate to the next page +}); ``` ## Specifications @@ -57,3 +55,7 @@ function printNavTimingData() { ## Browser compatibility {{Compat}} + +## See also + +- [`unload`](/en-US/docs/Web/API/Window/unload_event) event From 593087e394476dc178fafe60b0fc1ca5fee69b00 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 5 Dec 2022 11:48:04 +0100 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: wbamberg --- files/en-us/web/api/performancenavigationtiming/index.md | 8 ++++---- .../performancenavigationtiming/redirectcount/index.md | 6 +++--- .../web/api/performancenavigationtiming/type/index.md | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/api/performancenavigationtiming/index.md b/files/en-us/web/api/performancenavigationtiming/index.md index 20705198efa6de0..ac1cc10e3589097 100644 --- a/files/en-us/web/api/performancenavigationtiming/index.md +++ b/files/en-us/web/api/performancenavigationtiming/index.md @@ -16,7 +16,7 @@ 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 from {{domxref("PerformanceResourceTiming")}} and {{domxref("PerformanceEntry")}}. +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}} @@ -45,13 +45,13 @@ 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`](/en-US/docs/Web/API/Document/readyState). + - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the browser 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`](/en-US/docs/Web/API/Document/DOMContentLoaded_event)) event completes. + - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately after the current document's [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event)) event handlers complete. - {{domxref('PerformanceNavigationTiming.domContentLoadedEventStart')}} {{ReadOnlyInline}} - : A {{domxref("DOMHighResTimeStamp")}} representing the time value equal to the time immediately before the user agent fires the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event at the current document. - {{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`](/en-US/docs/Web/API/Document/readyState). + - : A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before the browser 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. - {{domxref('PerformanceNavigationTiming.loadEventStart')}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md index 4a5d57835ccc190..abb35c079759416 100644 --- a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md +++ b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md @@ -12,9 +12,9 @@ browser-compat: api.PerformanceNavigationTiming.redirectCount {{APIRef("Performance API")}} -The **`redirectCount`** read-only property returns number representing the amount of redirects since the last non-redirect navigation in 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. -The higher the amount of redirects on a page, the higher is the page load time. You want to avoid multiple redirects to improve the performance of your web page. +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. @@ -24,7 +24,7 @@ Note that client side redirects, such as ` { }); ``` -You could collect `reload` entries in a sever-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-forth, for example. +You could collect `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. ## Specifications From 4a15b07389c7772ae62ac3b9dd6e495e26f8bc9f Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 5 Dec 2022 12:32:32 +0100 Subject: [PATCH 3/4] Update descriptions & use event handler throughout --- .../domcomplete/index.md | 4 +-- .../domcontentloadedeventend/index.md | 16 +++++++----- .../domcontentloadedeventstart/index.md | 16 +++++++----- .../dominteractive/index.md | 4 +-- .../api/performancenavigationtiming/index.md | 26 +++++++++---------- .../loadeventend/index.md | 19 +++++++------- .../loadeventstart/index.md | 19 +++++++------- .../unloadeventend/index.md | 19 +++++++------- .../unloadeventstart/index.md | 19 +++++++------- 9 files changed, 71 insertions(+), 71 deletions(-) diff --git a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md index 4e9decdd285fe44..9db0d5e01c79eaa 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md @@ -12,13 +12,13 @@ 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`](/en-US/docs/Web/API/Document/readyState). +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`](/en-US/docs/Web/API/Document/readyState). +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 diff --git a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md index ce629e5d849a5f2..e4bc3d77b82f41a 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md @@ -12,26 +12,28 @@ 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`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) 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`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) 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 -### Measuring `DOMContentLoaded` processing time +### Measuring `DOMContentLoaded` event handler time -The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event. +The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler. ```js const resources = performance.getEntriesByType("navigation"); resources.forEach((entry) => { - const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; - console.log(`${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`); - } + const domContentLoadedTime = + entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; + console.log( + `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms` + ); }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md index 32f96bd897710c7..36a83af61aaf1ef 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md @@ -12,26 +12,28 @@ 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](/en-US/docs/Web/API/Document/DOMContentLoaded_event) 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`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) 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 -### Measuring `DOMContentLoaded` processing time +### Measuring `DOMContentLoaded` event handler time -The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event. +The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler. ```js const resources = performance.getEntriesByType("navigation"); resources.forEach((entry) => { - const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; - console.log(`${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`); - } + const domContentLoadedTime = + entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; + console.log( + `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms` + ); }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md index 107b0d10551ae09..e2c38f7dc10a9de 100644 --- a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md +++ b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md @@ -12,7 +12,7 @@ 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`](/en-US/docs/Web/API/Document/readyState). +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. @@ -22,7 +22,7 @@ If there is no parser-blocking JavaScript then the [`DOMContentLoaded`](/en-US/d ## 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`](/en-US/docs/Web/API/Document/readyState). +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 diff --git a/files/en-us/web/api/performancenavigationtiming/index.md b/files/en-us/web/api/performancenavigationtiming/index.md index ac1cc10e3589097..6365a402ccc0630 100644 --- a/files/en-us/web/api/performancenavigationtiming/index.md +++ b/files/en-us/web/api/performancenavigationtiming/index.md @@ -26,18 +26,18 @@ The following diagram shows all of the timestamp properties defined in `Performa ## 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 URL](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"`. @@ -45,25 +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 the time immediately before the browser sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"complete"`. + - : 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`](/en-US/docs/Web/API/Document/DOMContentLoaded_event)) event handlers complete. + - : 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`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) 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 the time immediately before the browser sets the document's [`readyState`](/en-US/docs/Web/API/Document/readyState) to `"interactive"`. + - : 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. + - : 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. Either "`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 a79f6e1ee72d58f..1e7435f58308320 100644 --- a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md @@ -12,35 +12,34 @@ 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 -### Measuring document loading time +### Measuring `load` event handler time -The following example measures how long it takes to load a document. +The following example measures how long it takes to process the `load` event handler. ```js const resources = performance.getEntriesByType("navigation"); resources.forEach((entry) => { - const loadingTime = entry.loadEventEnd - entry.loadEventStart; - if (loadingTime > 0) { + const loadEventTime = entry.loadEventEnd - entry.loadEventStart; + if (loadEventTime > 0) { console.log(`${entry.name}: - Document loading time: ${loadingTime}ms`); + load event handler time: ${loadEventTime}ms`); } }); ``` -This is especially useful if a (potentially long-running) [`load`](/en-US/docs/Web/API/Window/load_event) event is used. +This is especially useful to measure the time of long running [`load`](/en-US/docs/Web/API/Window/load_event) event handlers. ```js window.addEventListener("load", (event) => { - // Some code the browser must run - // when loading the document + // Some long running code }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md index e1c981cfce599b0..a02edf35adc96a4 100644 --- a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md @@ -12,35 +12,34 @@ 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 -### Measuring document loading time +### Measuring `load` event handler time -The following example measures how long it takes to load a document. +The following example measures how long it takes to process the `load` event handler. ```js const resources = performance.getEntriesByType("navigation"); resources.forEach((entry) => { - const loadingTime = entry.loadEventEnd - entry.loadEventStart; - if (loadingTime > 0) { + const loadEventTime = entry.loadEventEnd - entry.loadEventStart; + if (loadEventTime > 0) { console.log(`${entry.name}: - Document loading time: ${loadingTime}ms`); + load event handler time: ${loadEventTime}ms`); } }); ``` -This is especially useful if a (potentially long-running) [`load`](/en-US/docs/Web/API/Window/load_event) event is used. +This is especially useful to measure the time of long running [`load`](/en-US/docs/Web/API/Window/load_event) event handlers. ```js window.addEventListener("load", (event) => { - // Some code the browser must run - // when loading the document + // Some long running code }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md index e6ae83237609c00..ccc1b76ee71651f 100644 --- a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md @@ -12,39 +12,38 @@ 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. +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 The `unloadEventEnd` property can have the following values: -- 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. +- 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 -### Measuring document unloading time +### Measuring `unload` event handler time -The following example measures how long it takes to unload a document. +The following example measures how long it takes to process the `unload` event handler. ```js const resources = performance.getEntriesByType("navigation"); resources.forEach((entry) => { - const unloadingTime = entry.unloadEventEnd - entry.unloadEventStart; - if (unloadingTime > 0) { + const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart; + if (unloadEventTime > 0) { console.log(`${entry.name}: - Document unloading time: ${unloadingTime}ms`); + unload event handler time: ${unloadEventTime}ms`); } }); ``` -This is especially useful if a (potentially long-running) [`unload`](/en-US/docs/Web/API/Window/unload_event) event is used. +This is especially 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 code the browser must run - // before it can navigate to the next page + // Some long running code }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md index 8b64bf1d2536fd8..b06595e5d6c0895 100644 --- a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md @@ -12,39 +12,38 @@ 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. +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 The `unloadEventStart` property can have the following values: -- 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. +- 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 -### Measuring document unloading time +### Measuring `unload` event handler time -The following example measures how long it takes to unload a document. +The following example measures how long it takes to process the `unload` event handler. ```js const resources = performance.getEntriesByType("navigation"); resources.forEach((entry) => { - const unloadingTime = entry.unloadEventEnd - entry.unloadEventStart; - if (unloadingTime > 0) { + const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart; + if (unloadEventTime > 0) { console.log(`${entry.name}: - Document unloading time: ${unloadingTime}ms`); + unload event handler time: ${unloadEventTime}ms`); } }); ``` -This is especially useful if a (potentially long-running) [`unload`](/en-US/docs/Web/API/Window/unload_event) event is used. +This is especially 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 code the browser must run - // before it can navigate to the next page + // Some long running code }); ``` From 6748f18747223cda7523eee7bbcc2eab5bf33d0c Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 5 Dec 2022 13:37:31 +0100 Subject: [PATCH 4/4] Add PerformanceObserver examples --- .../domcomplete/index.md | 22 ++++++++-- .../domcontentloadedeventend/index.md | 24 +++++++++-- .../domcontentloadedeventstart/index.md | 24 +++++++++-- .../dominteractive/index.md | 24 +++++++++-- .../loadeventend/index.md | 39 +++++++++++++----- .../loadeventstart/index.md | 39 +++++++++++++----- .../redirectcount/index.md | 28 +++++++++++-- .../performancenavigationtiming/type/index.md | 25 ++++++++--- .../unloadeventend/index.md | 41 ++++++++++++++----- .../unloadeventstart/index.md | 41 ++++++++++++++----- 10 files changed, 241 insertions(+), 66 deletions(-) diff --git a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md index 9db0d5e01c79eaa..60d51729be1a6d3 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcomplete/index.md @@ -24,12 +24,26 @@ A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before th ### Logging DOM completion time -The following example logs the time when the DOM is complete. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { - console.log(entry.domComplete); +const entries = performance.getEntriesByType("navigation"); +entries.forEach((entry) => { + console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`); }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md index e4bc3d77b82f41a..73819ab1131784c 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventend/index.md @@ -24,11 +24,29 @@ A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the ### Measuring `DOMContentLoaded` event handler time -The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { +const entries = performance.getEntriesByType("navigation"); +entries.forEach((entry) => { const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; console.log( diff --git a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md index 36a83af61aaf1ef..f2fc2adf2bc6d46 100644 --- a/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md @@ -24,11 +24,29 @@ A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before th ### Measuring `DOMContentLoaded` event handler time -The following example measures how long it takes process the [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) event handler. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { +const entries = performance.getEntriesByType("navigation"); +entries.forEach((entry) => { const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; console.log( diff --git a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md index e2c38f7dc10a9de..0ce1503295122e5 100644 --- a/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md +++ b/files/en-us/web/api/performancenavigationtiming/dominteractive/index.md @@ -28,12 +28,28 @@ A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before th ### Logging DOM interaction time -The following example logs the time when the DOM construction has finished and interaction with it is possible. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { - console.log(entry.domInteractive); +const entries = performance.getEntriesByType("navigation"); +entries.forEach((entry) => { + console.log(`${entry.name}: domInteractive time: ${entry.domInteractive}ms`); }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md index 1e7435f58308320..67d60c1119671f6 100644 --- a/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/loadeventend/index.md @@ -22,24 +22,41 @@ A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the ### Measuring `load` event handler time -The following example measures how long it takes to process the `load` event handler. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { - const loadEventTime = entry.loadEventEnd - entry.loadEventStart; - if (loadEventTime > 0) { - console.log(`${entry.name}: - load event handler time: ${loadEventTime}ms`); - } +window.addEventListener("load", (event) => { + // Some long running code }); ``` -This is especially useful to measure the time of long running [`load`](/en-US/docs/Web/API/Window/load_event) event handlers. +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 -window.addEventListener("load", (event) => { - // Some long running code +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`); + } }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md index a02edf35adc96a4..fc1ec48d2693233 100644 --- a/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/loadeventstart/index.md @@ -22,24 +22,41 @@ A {{domxref("DOMHighResTimeStamp")}} representing the time immediately before th ### Measuring `load` event handler time -The following example measures how long it takes to process the `load` event handler. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { - const loadEventTime = entry.loadEventEnd - entry.loadEventStart; - if (loadEventTime > 0) { - console.log(`${entry.name}: - load event handler time: ${loadEventTime}ms`); - } +window.addEventListener("load", (event) => { + // Some long running code }); ``` -This is especially useful to measure the time of long running [`load`](/en-US/docs/Web/API/Window/load_event) event handlers. +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 -window.addEventListener("load", (event) => { - // Some long running code +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`); + } }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md index abb35c079759416..51b56c51efc7b92 100644 --- a/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md +++ b/files/en-us/web/api/performancenavigationtiming/redirectcount/index.md @@ -31,11 +31,33 @@ The `redirectCount` property can have the following values: ### Logging entries with redirects -The following example checks if there are one or more redirects and logs the entry's name and the redirection time if available. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { +const entries = performance.getEntriesByType("navigation"); +entries.forEach((entry) => { const name = entry.name; const redirectCount = entry.redirectCount; const redirectTime = entry.redirectEnd - entry.redirectStart; diff --git a/files/en-us/web/api/performancenavigationtiming/type/index.md b/files/en-us/web/api/performancenavigationtiming/type/index.md index 6d94a72ad7c4317..1ed2c2b4db060a6 100644 --- a/files/en-us/web/api/performancenavigationtiming/type/index.md +++ b/files/en-us/web/api/performancenavigationtiming/type/index.md @@ -35,11 +35,28 @@ The `type` property can have the following values: ### Logging reload navigation -The following example checks whether the navigation was of type `reload` and logs the entry to the console. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { +const entries = performance.getEntriesByType("navigation"); +entries.forEach((entry) => { if (entry.type === "reload") { console.log(`${entry.name} was reloaded!`); console.log(entry); @@ -47,8 +64,6 @@ resources.forEach((entry) => { }); ``` -You could collect `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. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md index ccc1b76ee71651f..30b3acca0cc1247 100644 --- a/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md +++ b/files/en-us/web/api/performancenavigationtiming/unloadeventend/index.md @@ -26,24 +26,43 @@ The `unloadEventEnd` property can have the following values: ### Measuring `unload` event handler time -The following example measures how long it takes to process the `unload` event handler. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { - const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart; - if (unloadEventTime > 0) { - console.log(`${entry.name}: - unload event handler time: ${unloadEventTime}ms`); - } +window.addEventListener("unload", (event) => { + // Some long running code }); ``` -This is especially useful to measure the time of long running [`unload`](/en-US/docs/Web/API/Window/load_event) event handlers. +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 -window.addEventListener("unload", (event) => { - // Some long running code +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`); + } }); ``` diff --git a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md index b06595e5d6c0895..ad622d318a0fa83 100644 --- a/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md +++ b/files/en-us/web/api/performancenavigationtiming/unloadeventstart/index.md @@ -26,24 +26,43 @@ The `unloadEventStart` property can have the following values: ### Measuring `unload` event handler time -The following example measures how long it takes to process the `unload` event handler. +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 -const resources = performance.getEntriesByType("navigation"); -resources.forEach((entry) => { - const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart; - if (unloadEventTime > 0) { - console.log(`${entry.name}: - unload event handler time: ${unloadEventTime}ms`); - } +window.addEventListener("unload", (event) => { + // Some long running code }); ``` -This is especially useful to measure the time of long running [`unload`](/en-US/docs/Web/API/Window/load_event) event handlers. +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 -window.addEventListener("unload", (event) => { - // Some long running code +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`); + } }); ```