Signatur
Beschreibung
Die Eigenschaft document.prerendering gibt true zurück, solange eine Seite vorgerendert wird. Das Vorrendern stößt der Browser an, zum Beispiel über die Speculation Rules API (<script type="speculationrules">) oder über eine Vorhersage aus der Adressleiste. Dabei lädt der Browser die Seite in einem unsichtbaren Hintergrund-Tab vollständig und führt auch ihr JavaScript aus. Sobald der Nutzer tatsächlich zu der Seite navigiert, wird sie aktiviert und fast ohne Verzögerung angezeigt. Ab diesem Moment ist prerendering false.
Gebraucht wird die Eigenschaft vor allem für Code, der erst laufen soll, wenn der Nutzer die Seite wirklich sieht. Dazu gehören Analyse- und Tracking-Aufrufe (Seitenaufrufe zählen), das Abspielen von Medien, Animationen, Werbeeinblendungen oder serverseitige Aktionen mit Nebenwirkungen. Solche Aufgaben verschiebt man bis zum Ereignis prerenderingchange, das beim Aktivieren der Seite genau einmal am document ausgelöst wird.
Wie lange die Aktivierung gedauert hat, lässt sich über PerformanceNavigationTiming.activationStart messen. Der Wert ist größer als 0, wenn die Seite vorgerendert wurde. So kann man auch nach der Aktivierung noch feststellen, ob es ein Vorrendern gab.
Rückgabewert
true, solange das Dokument vorgerendert wird, sonst false. In Browsern ohne Unterstützung ist die Eigenschaft undefined.Beispiele
Prüfen, ob die Seite gerade vorgerendert wird
if (document.prerendering) {
console.log('Seite wird im Hintergrund vorgerendert');
} else {
console.log('Seite ist sichtbar bzw. aktiviert');
}Seitenaufruf erst nach der Aktivierung zählen
const trackPageView = () => {
navigator.sendBeacon('/analytics', JSON.stringify({
url: location.href,
zeit: Date.now()
}));
console.log('Seitenaufruf gezählt');
};
if (document.prerendering) {
// Warten, bis der Nutzer die Seite wirklich öffnet
document.addEventListener('prerenderingchange', trackPageView, { once: true });
} else {
trackPageView();
}Hilfsfunktion: Promise, das nach der Aktivierung erfüllt wird
const whenActivated = () => new Promise((resolve) => {
if (document.prerendering) {
document.addEventListener('prerenderingchange', () => resolve(), { once: true });
} else {
resolve();
}
});
const init = async () => {
await whenActivated();
document.querySelector('video')?.play();
console.log('Video gestartet');
};
init();Nachträglich erkennen, ob vorgerendert wurde
const [nav] = performance.getEntriesByType('navigation');
const wasPrerendered = document.prerendering || (nav?.activationStart ?? 0) > 0;
console.log(wasPrerendered ? 'vorgerendert' : 'normal geladen');
if (nav?.activationStart > 0) {
console.log(`Aktiviert nach ${Math.round(nav.activationStart)} ms`);
}// Wichtig · Fallstricke
- Browser-Kompatibilität: Bisher nur in Chromium-Browsern (Chrome/Edge ab 108). Firefox und Safari unterstützen die Eigenschaft nicht, dort ist sie
undefined. Weilundefinedals falsch gilt, funktioniertif (document.prerendering)trotzdem ohne zusätzliche Prüfung auf Unterstützung. - Verwechslungsgefahr:
document.visibilityStateist beim Vorrendern zwar"hidden", das allein ist aber nicht aussagekräftig, weil auch Tabs im Hintergrund"hidden"melden. Das früher genutztevisibilityState === "prerender"ist veraltet. - Viele Analyse-Bibliotheken (z. B. Google Analytics) berücksichtigen das Vorrendern inzwischen selbst. Bei eigenen Lösungen muss man es selbst behandeln, sonst werden Seitenaufrufe gezählt, die der Nutzer nie gesehen hat.
- Einige APIs werden während des Vorrenderns aufgeschoben oder blockiert, etwa Berechtigungsabfragen,
alert(), Geolocation und Benachrichtigungen. Solche Aufrufe gehören hinter die Aktivierung. - Code mit Nebenwirkungen auf dem Server (z. B. Warenkorb ändern, Anmelden) sollte nie während des Vorrenderns laufen. Der Nutzer navigiert unter Umständen gar nicht zu der Seite.