Dokument: prerenderingchange Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("prerenderingchange", (event) => {});

prerenderingchange = (event) => {};

Ein generisches Event.

Das Beispiel zeigt, wie man Code zurückstellen kann, der ansonsten während des Prerenderings ausgeführt würde, bis nach der Aktivierung der Seite. Dies ist nützlich, um Analysecode zu verschieben, der nur relevant ist, wenn und falls die Seite tatsächlich betrachtet wird.

Der Code überprüft, ob das Prerendering läuft, indem er Document.prerendering verwendet. Falls ja, wird ein Event-Listener hinzugefügt, der eine Analyse-Initialisierungsfunktion ausführt, sobald die Seite aktiviert wird. Auf einer Seite, die nicht vorgerendert wird, wird der Analysecode sofort ausgeführt.

if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

Beachten Sie, dass dieser Code nicht verwendet werden sollte, um zu messen, wie oft ein Prerender aktiviert wird, da der Code möglicherweise ausgeführt wird, nachdem eine vorgerenderte Seite bereits aktiviert wurde.

Dieser Code zeigt, wie man misst, wie oft ein Prerender aktiviert wird. Es verwendet das prerenderingchange, um Aktivierungsereignisse zu verfolgen, und Performance.getEntriesByType(), um Navigationsaktivierungen zu verfolgen.

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");
}

• Speculation Rules API
• prerendering Eigenschaft
• PerformanceNavigationTiming.activationStart Eigenschaft