JavaScript Document prerenderingchange Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event

Definition

In JavaScript, the Document prerenderingchange event fires on a prerendered document when it is activated — the user actually views the page (MDN). A generic Event.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for prerenderingchange. Start with this line.

JavaScript
addEventListener("prerenderingchange", fn)
CallWhat it does
addEventListener("prerenderingchange", fn)Primary signature.

Built into the browser. Listen with document.addEventListener("prerenderingchange", …) — no import required.

Library declarations
JavaScript
addEventListener("prerenderingchange", fn)

Parameters

ParameterDescription
prerenderingchangeOptional. Runs after the user activates the page

Return Value

Return ValueDescription
*Fires as a Document event (listener receives the Event object).

JavaScript Examples

Example 1 — Defer Analytics Until Activation

MDN pattern: wait for prerenderingchange only while prerendering.

JavaScript
function initAnalytics() {
  console.log("Analytics initialized");
}

if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
  console.log("Waiting for prerenderingchange...");
} else {
  initAnalytics();
}
Try It Yourself

How It Works

  1. Define init. Put analytics / ads / similar side effects in one function.
  2. Check prerendering. If true, the page is loading in the background.
  3. Wait once. prerenderingchange runs init when the user views the page.
  4. Else run now. Normal loads (and already-activated pages) init immediately.

Example 2 — Measure Prerender Activations

MDN three-way check: currently prerendering, already activated, or normal load.

JavaScript
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");
}
Try It Yourself

How It Works

  1. Branch 1. Still prerendering → listen for the activation event.
  2. Branch 2. activationStart > 0 means activation already happened.
  3. Branch 3. Otherwise this was a normal (non-prerender) load.
  4. Why three? Defer-init alone can miss activations that finished before your script.

Example 3 — whenActivated Helper

Reusable wrapper: run a callback after activation, or immediately on a normal load.

JavaScript
function whenActivated(fn) {
  if ("prerendering" in document && document.prerendering) {
    document.addEventListener("prerenderingchange", fn, { once: true });
  } else {
    fn();
  }
}

whenActivated(() => {
  console.log("Safe to start analytics / ads now");
});
Try It Yourself

How It Works

  1. Feature-detect. Guard with "prerendering" in document.
  2. Wait if needed. Only attach the event while currently prerendering.
  3. Else call now. Unsupported browsers and normal loads run fn immediately.
  4. Reuse. Pass any side-effect callback — analytics, ads, autoplay setup.

Browser Support

Document prerenderingchange is part of Prerendering Revamped / Speculation Rules. MDN marks it Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard — still feature-detect in production.

✓ Experimental · Limited availability

Document prerenderingchange

Fires when a prerendered document is activated (user views the page). Pair with document.prerendering.

Limited Feature-detect required
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
prerenderingchange Limited

Bottom line: Support tracks Speculation Rules prerender. Always feature-detect, use the defer pattern for side effects, and add activationStart when measuring.

Frequently Asked Questions

It fires on a prerendered document when it is activated — that is, when the user actually views the page after Speculation Rules prerender (MDN).
MDN marks Document prerenderingchange as Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard.
When document.prerendering is true, add a once listener for prerenderingchange to run code after activation. If prerendering is false, run that code immediately (MDN).
Not safely by itself. MDN notes the defer-init pattern can miss activations that already happened. Combine prerendering, prerenderingchange, and navigation activationStart.
A generic Event. Listen with document.addEventListener("prerenderingchange", …) or document.onprerenderingchange.
Analytics, ads, autoplay, client storage writes, and other side effects that assume the user is viewing the page. See MDN’s Speculation Rules unsafe speculative loading guidance.

Next: readystatechange

Learn the Document event that fires when readyState changes.

readystatechange tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

11 people found this page helpful