diff --git a/files/en-us/web/api/document/prerendering/index.md b/files/en-us/web/api/document/prerendering/index.md index 5d0ac3b337d44bd..141e20c123f5824 100644 --- a/files/en-us/web/api/document/prerendering/index.md +++ b/files/en-us/web/api/document/prerendering/index.md @@ -32,7 +32,7 @@ When a prerendered document is activated, {{domxref("PerformanceNavigationTiming function pagePrerendered() { return ( document.prerendering || - self.performance?.getEntriesByType?.("navigation")[0]?.activationStart > 0 + performance.getEntriesByType("navigation")[0]?.activationStart > 0 ); } ``` @@ -52,6 +52,24 @@ if (document.prerendering) { > [!NOTE] > See the [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) landing page and particularly the [Unsafe speculative loading conditions](/en-US/docs/Web/API/Speculation_Rules_API#unsafe_speculative_loading_conditions) section for more information on the kinds of activities you might wish to delay. +To measure how often a prerender is activated, combine all three APIs: `document.prerendering` to detect cases where the page is currently prerendering, `prerenderingchange` to watch for activations in that case, and `activationStart` to check for cases where the page was prerendered in the past. + +```js +if (document.prerendering) { + document.addEventListener( + "prerenderingchange", + () => { + console.log("Prerender activated after this script ran"); + }, + { once: true }, + ); +} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) { + console.log("Prerender activated before this script ran"); +} else { + console.log("This page load was not via prerendering"); +} +``` + ## Specifications {{Specifications}} @@ -64,3 +82,4 @@ if (document.prerendering) { - [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) - {{domxref("Document.prerenderingchange_event", "prerenderingchange")}} event +- {{domxref("PerformanceNavigationTiming.activationStart")}} property diff --git a/files/en-us/web/api/document/prerenderingchange_event/index.md b/files/en-us/web/api/document/prerenderingchange_event/index.md index d56a5b85d53a7b9..2c199aa9c6ee798 100644 --- a/files/en-us/web/api/document/prerenderingchange_event/index.md +++ b/files/en-us/web/api/document/prerenderingchange_event/index.md @@ -28,7 +28,13 @@ A generic {{domxref("Event")}}. ## Examples -The following code sets up an event listener to run a function once prerendering has finished, on a prerendered page (the prerendering is detected via {{domxref("Document.prerendering")}}), or runs it immediately on a non-prerendered page: +### Preventing code from running during prerendering + +The example shows how to defer code, that would otherwise run during prerendering, until after page activation. +This is useful for deferring analytics code, which is only relevant when and if the page is actually viewed. + +The code checks if prerendering is running using {{domxref("Document.prerendering")}}, and if so adds an event listener to run an analytics initialization function once the page is activated. +On a page that is not prerendering the analytics code is run immediately. ```js if (document.prerendering) { @@ -40,9 +46,32 @@ if (document.prerendering) { } ``` +Note that this kind of code should not be used for measuring how often a prerender is activated, because the code may run after a prerendered page has already activated. + > [!NOTE] > See the [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) landing page and particularly the [Unsafe speculative loading conditions](/en-US/docs/Web/API/Speculation_Rules_API#unsafe_speculative_loading_conditions) section for more information on the kinds of activities you might wish to delay until after prerendering has finished. +### Measuring prerendering activations + +This code shows how to measure how often a prerender is activated. +It uses the `prerenderingchange` to track activation events, and {{domxref("Performance.getEntriesByType()")}} to track navigation activations. + +```js +if (document.prerendering) { + document.addEventListener( + "prerenderingchange", + () => { + console.log("Prerender activated after this script ran"); + }, + { once: true }, + ); +} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) { + console.log("Prerender activated before this script ran"); +} else { + console.log("This page load was not via prerendering"); +} +``` + ## Specifications {{Specifications}} @@ -55,3 +84,4 @@ if (document.prerendering) { - [Speculation Rules API](/en-US/docs/Web/API/Speculation_Rules_API) - {{domxref("Document.prerendering", "prerendering")}} property +- {{domxref("PerformanceNavigationTiming.activationStart")}} property