DiePerformanceNavigationTiming.notRestoredReasons-Eigenschaft liefert Informationen darüber, warum das aktuelle Dokument daran gehindert wurde, denbfcache bei der Navigation zu nutzen. Entwickler können diese Informationen verwenden, um Seiten zu identifizieren, die Aktualisierungen benötigen, um bfcache-kompatibel zu sein, und so die Leistung der Website zu verbessern.

Back/forward Cache (bfcache)

Moderne Browser bieten eine Optimierungsfunktion für die Navigation in der Historie namens back/forward cache (bfcache). Diese ermöglicht ein sofortiges Laden von Seiten, die der Benutzer bereits besucht hat. Seiten können aus verschiedenen Gründen daran gehindert werden, in den bfcache zu gelangen oder während sie sich darin befinden, entfernt zu werden, einige dieser Gründe sind durch Spezifikationen erforderlich, andere spezifisch für Browser-Implementierungen.

Um die Überwachung der bfcache-Blockierungsgründe zu ermöglichen, enthält diePerformanceNavigationTiming-Klasse einenotRestoredReasons-Eigenschaft. Diese gibt einNotRestoredReasons-Objekt zurück, das verwandte Informationen über das Top-Level-Frame und alle<iframe>s im Dokument enthält:

• Gründe, warum die Nutzung des bfcache blockiert wurde.
• Details wie dieid undname des Frames, um<iframe>s im HTML zu identifizieren.

Protokollierung von bfcache-Blockierungsgründen

Laufende Daten zur bfcache-Blockierung können mittels einesPerformanceObserver abgerufen werden, wie hier gezeigt:

const observer = new PerformanceObserver((list) => {  let perfEntries = list.getEntries();  perfEntries.forEach((navEntry) => {    console.log(navEntry.notRestoredReasons);  });});observer.observe({ type: "navigation", buffered: true });

Alternativ können Sie historische Daten zur bfcache-Blockierung mit einer geeigneten Methode wiePerformance.getEntriesByType() abrufen:

function returnNRR() {  const navEntries = performance.getEntriesByType("navigation");  for (let i = 0; i < navEntries.length; i++) {    console.log(`Navigation entry ${i}`);    let navEntry = navEntries[i];    console.log(navEntry.notRestoredReasons);  }}

Die obigen Code-Snippets protokollierenNotRestoredReasons-Objekte in der Konsole. Diese Objekte haben folgende Struktur, die den blockierten Zustand des Top-Level-Frames darstellt:

{  "children": [],  "id": null,  "name": null,  "reasons": [{ "reason": "unload-listener" }],  "src": "",  "url": "example.com"}

Die Eigenschaften sind wie folgt:

childrenSchreibgeschütztExperimentell

Ein Array vonNotRestoredReasons-Objekten, eines für jedes Kind-<iframe>, das im aktuellen Dokument eingebettet ist und Gründe enthalten kann, warum das Top-Level-Frame in Bezug auf die Kind-Frames blockiert wurde. Jedes Objekt hat dieselbe Struktur wie das Elternobjekt — auf diese Weise können beliebig viele Ebenen von eingebetteten<iframe>s rekursiv innerhalb des Objekts dargestellt werden. Wenn das Frame keine Kinder hat, ist das Array leer; wenn sich das Dokument in einem Cross-Origin-<iframe> befindet, gibtchildrennull zurück.

idSchreibgeschütztExperimentell

Ein String, der den Wert desid-Attributs des<iframe> darstellt, in dem das Dokument enthalten ist (beispielsweise<iframe src="...">). Befindet sich das Dokument nicht in einem<iframe> oder hat das<iframe> keineid gesetzt, gibtidnull zurück.

nameSchreibgeschütztExperimentell

Ein String, der den Wert desname-Attributs des<iframe> darstellt, in dem das Dokument enthalten ist (beispielsweise<iframe name="bar" src="...">). Befindet sich das Dokument nicht in einem<iframe> oder hat das<iframe> keinenname gesetzt, gibtnamenull zurück.

reasonsSchreibgeschütztExperimentell

Ein Array vonNotRestoredReasonDetails-Objekten, die jeweils einen Grund darstellen, warum die navigierte Seite daran gehindert wurde, den bfcache zu nutzen. Befindet sich das Dokument in einem Cross-Origin-<iframe>, gibtreasonsnull zurück, aber das übergeordnete Dokument kann einenreason von"masked" anzeigen, wenn eines der<iframe>s die bfcache-Nutzung für das Top-Level-Frame blockiert hat. Weitere Details zu den Gründen finden Sie unterBlockierungsgründe.

srcSchreibgeschütztExperimentell

Ein String, der den Pfad zur Quelle des<iframe> darstellt, in dem das Dokument enthalten ist (beispielsweise<iframe src="exampleframe.html">). Befindet sich das Dokument nicht in einem<iframe>, gibtsrcnull zurück.

urlSchreibgeschütztExperimentell

Ein String, der die URL der navigierten Seite oder des<iframe>s repräsentiert. Befindet sich das Dokument in einem Cross-Origin-<iframe>, gibturlnull zurück.

Bericht über bfcache-Blockaden in gleich-originierenden<iframe>s

Wenn eine Seite gleich-originierende<iframe>s eingebettet hat, enthält der zurückgegebenenotRestoredReasons-Wert ein Array von Objekten innerhalb derchildren-Eigenschaft, die die Blockierungsgründe in Bezug auf jedes eingebettete Frame darstellen.

Zum Beispiel:

{  "children": [    {      "children": [],      "id": "iframe-id",      "name": "iframe-name",      "reasons": [],      "src": "./index.html",      "url": "https://www.example.com/iframe-examples.html"    },    {      "children": [],      "id": "iframe-id2",      "name": "iframe-name2",      "reasons": [{ "reason": "unload-listener" }],      "src": "./unload-examples.html",      "url": "https://www.example.com/unload-examples.html"    }  ],  "id": null,  "name": null,  "reasons": [],  "src": null,  "url": "https://www.example.com"}

Bericht über bfcache-Blockaden in Cross-Origin-<iframe>s

Wenn eine Seite Cross-Origin-Frames eingebettet hat, ist die Menge der darüber geteilten Informationen begrenzt, um das Auslaufen von Cross-Origin-Informationen zu vermeiden. Es wird nur Information einbezogen, die die äußere Seite bereits kennt, und ob der Cross-Origin-Subtree die bfcache-Blockierung verursacht hat. Keine Blockierungsgründe oder Informationen über tiefere Ebenen des Subtrees (selbst wenn einige Sub-Level gleich-originierend sind) werden einbezogen.

Zum Beispiel:

{  "children": [    {      "children": [],      "id": "iframe-id",      "name": "iframe-name",      "reasons": [],      "src": "https://www.example2.com/",      "url": null    }  ],  "id": null,  "name": null,  "reasons": [{ "reason": "masked" }],  "src": null,  "url": "https://www.example.com"}

Bei allen Cross-Origin-<iframe>s werden keine Blockierungsgründe gemeldet; für das Top-Level-Frame wird ein Grund von"masked" gemeldet, um anzuzeigen, dass die Gründe aus Datenschutzgründen verborgen werden. Beachten Sie, dass"masked" auch zum Verbergen von benutzerspezifischen Gründen der User Agents verwendet werden kann; es weist nicht immer auf ein Problem in einem<iframe> hin.

Blockierungsgründe

Es gibt viele verschiedene Gründe, warum eine Blockierung auftreten könnte. Obwohl die Gründe standardisiert sind, sollten Entwickler vermeiden, sich auf eine bestimmte Wortwahl zu verlassen, und darauf vorbereitet sein, dass neue Gründe hinzugefügt und alte entfernt werden.

Die inder Spezifikation aufgeführten Werte sind:

"fetch"

Beim Ausladen wurde ein vom aktuellen Dokument initiierter Abruf (z. B. überfetch()) abgebrochen, während er noch im Gange war. Infolgedessen befand sich die Seite nicht in einem stabilen Zustand, der im bfcache gespeichert werden konnte.

"lock"

Beim Ausladen wurden gehaltene Sperren und Sperranforderungen beendet, sodass sich die Seite nicht in einem stabilen Zustand befand, der im bfcache gespeichert werden konnte.

"masked"

Der genaue Grund ist aus Datenschutzgründen verborgen. Dieser Wert kann Folgendes bedeuten:

• Das aktuelle Dokument hat Kinder, die in einem Cross-Origin-<iframe> enthalten sind und die Speicherung im bfcache verhinderten.
• Das aktuelle Dokument konnte aus benutzerspezifischen Gründen des User Agents nicht im bfcache gespeichert werden.

"navigation-failure"

Die ursprüngliche Navigation, die das aktuelle Dokument erstellt hat, ist fehlgeschlagen, und die Speicherung des resultierenden Fehlerdokuments im bfcache wurde verhindert.

"parser-aborted"

Das aktuelle Dokument hat sein initiales HTML-Parsen nie beendet, und die Speicherung des unvollständigen Dokuments im bfcache wurde verhindert.

"websocket"

Während des Ausladens wurde eine offeneWebSocket-Verbindung geschlossen, sodass sich die Seite nicht in einem stabilen Zustand befand, der im bfcache gespeichert werden konnte.

Benutzerspezifische Blockierungsgründe

Zusätzliche Blockierungsgründe, die von einigen Browsern verwendet werden können, sind ebenfalls spezifiziert:

"audio-capture"

Das Dokument hat um Erlaubnis zur Audioaufnahme gebeten, indem es Media Capture and Streams'getUserMedia() mit Audio verwendet hat.

"background-work"

Das Dokument hat um Hintergrundarbeit gebeten, indem die Methoderegister() desSyncManager, die Methoderegister() desPeriodicSyncManager oder die Methodefetch() desBackgroundFetchManager aufgerufen wurde.

"broadcastchannel-message"

Während die Seite im Back/Forward-Cache gespeichert war, hat eineBroadcastChannel-Verbindung auf der Seite eine Nachricht erhalten, die einmessage-Ereignis ausgelöst hat.

"idbversionchangeevent"

Das Dokument hatte ein ausstehendesIDBVersionChangeEvent beim Ausladen.

"idledetector"

Das Dokument hatte einen aktivenIdleDetector beim Ausladen.

"keyboardlock"

Beim Ausladen war die Tastatursperre noch aktiv, da die Methodelock() derKeyboard aufgerufen wurde.

"mediastream"

EinMediaStreamTrack war beim Ausladen im Live-Zustand.

"midi"

Das Dokument hat um MIDI-Berechtigung gebeten, indemnavigator.requestMIDIAccess() aufgerufen wurde.

"modals"

Beim Ausladen wurden Benutzereingabeaufforderungen angezeigt.

"navigating"

Beim Ausladen war das Laden noch im Gange, und somit befand sich das Dokument nicht in einem Zustand, der im Back/Forward-Cache gespeichert werden konnte.

"navigation-canceled"

Die Navigationsanforderung wurde durch Aufruf vonwindow.stop() abgebrochen und die Seite befand sich nicht in einem Zustand, der im Back/Forward-Cache gespeichert werden konnte.

"non-trivial-browsing-context-group"

Die Browsing-Kontextgruppe dieses Dokuments hatte mehr als einen Top-Level-Browsing-Kontext.

"otpcredential"

Das Dokument hat einOTPCredential erstellt.

"outstanding-network-request"

Beim Ausladen hatte das Dokument ausstehende Netzwerk-Anfragen und befand sich nicht in einem Zustand, der im Back/Forward-Cache gespeichert werden konnte.

"paymentrequest"

Das Dokument hatte einen aktivenPaymentRequest beim Ausladen.

"pictureinpicturewindow"

Das Dokument hatte ein aktivesPictureInPictureWindow beim Ausladen.

"plugins"

Das Dokument enthielt Plugins.

"request-method-not-get"

Das Dokument wurde aus einer HTTP-Anfrage erstellt, deren Methode nichtGET war.

"response-auth-required"

Das Dokument wurde aus einer HTTP-Antwort erstellt, die eine HTTP-Authentifizierung erforderte.

"response-cache-control-no-store"

Das Dokument wurde aus einer HTTP-Antwort erstellt, derenCache-Control-Header das "no-store"-Token enthielt.

"response-cache-control-no-cache"

Das Dokument wurde aus einer HTTP-Antwort erstellt, derenCache-Control-Header das "no-cache"-Token enthielt.

"response-keep-alive"

Das Dokument wurde aus einer HTTP-Antwort erstellt, die einenKeep-Alive-Header enthielt.

"response-scheme-not-http-or-https"

Das Dokument wurde aus einer Antwort erstellt, deren URL-Schema kein HTTP(S)-Schema war.

"response-status-not-ok"

Das Dokument wurde aus einer HTTP-Antwort erstellt, deren Status kein ok-Status war.

"rtc"

Während des Ausladens wurde eineRTCPeerConnection oderRTCDataChannel geschlossen, sodass sich die Seite nicht in einem Zustand befand, der im Back/Forward-Cache gespeichert werden konnte.

"sensors"

Das Dokument hat Sensorzugriff angefordert.

"serviceworker-added"

Der Service-Worker-Client des Dokuments begann, von einemService-Worker kontrolliert zu werden, während die Seite im Back/Forward-Cache war.

"serviceworker-claimed"

Der aktive Service-Worker des Service-Worker-Clients des Dokuments wurde beansprucht, während die Seite im Back/Forward-Cache war.

"serviceworker-postmessage"

Der aktive Service-Worker des Service-Worker-Clients des Dokuments erhielt eine Nachricht, während die Seite im Back/Forward-Cache war.

"serviceworker-version-activated"

Die Version des aktiven Service-Workers des Service-Worker-Clients des Dokuments wurde aktiviert, während die Seite im Back/Forward-Cache war.

"serviceworker-unregistered"

Die Service-Worker-Registrierung des aktiven Service-Workers des Service-Worker-Clients des Dokuments wurde abgemeldet, während die Seite im Back/Forward-Cache war.

"sharedworker"

Dieses Dokument war im Besitzerset einesSharedWorkerGlobalScope.

"smartcardconnection"

Das Dokument hatte eine aktiveSmartCardConnection beim Ausladen.

"speechrecognition"

Das Dokument hatte eine aktiveSpeechRecognition beim Ausladen.

"storageaccess"

Das Dokument hat die Speicherzugriffsberechtigung mithilfe derStorage Access API angefordert.

"unload-listener"

Das Dokument hat einen Ereignis-Listener für dasunload-Ereignis registriert.

"video-capture"

Das Dokument hat um Erlaubnis zur Videoaufnahme gebeten, indem es Media Capture and Streams'getUserMedia() mit Video verwendet hat.

"webhid"

Das Dokument hat die MethoderequestDevice() derWebHID API aufgerufen.

"webshare"

Das Dokument hat dieWeb Share API verwendet, um die Methodenavigator.share() aufzurufen.

"webtransport"

Während des Ausladens wurde eine offeneWebTransport-Verbindung geschlossen, sodass sich die Seite nicht in einem Zustand befand, der im Back/Forward-Cache gespeichert werden konnte.

"webxrdevice"

Das Dokument hat einXRSystem erstellt.

Browser-Kompatibilität

Siehe auch

• notRestoredReasons API Explainer
• PerformanceNavigationTiming.notRestoredReasons
• NotRestoredReasons