Überwachung von bfcache-Blockierungsgründen

Moderne Browser bieten ein Optimierungsmerkmal für die Verlaufsnavigation namens Back/forward cache (bfcache). Dies ermöglicht ein sofortiges Ladeerlebnis, wenn Benutzer zu einer zuvor besuchten Seite zurückkehren. Seiten können aus verschiedenen Gründen daran gehindert werden, in den bfcache zu gelangen, oder während sie sich im bfcache befinden, entfernt werden. Einige dieser Gründe sind durch eine Spezifikation erforderlich, andere spezifisch für Browser-Implementierungen.

Um die Überwachung der bfcache-Blockierungsgründe zu ermöglichen, enthält die Klasse PerformanceNavigationTiming eine notRestoredReasons-Eigenschaft. Diese gibt ein NotRestoredReasons-Objekt zurück, das verwandte Informationen zum Top-Level-Frame und allen im Dokument vorhandenen <iframe>s enthält:

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

Laufende bfcache-Blockierungsdaten können mit einem PerformanceObserver wie folgt abgerufen werden:

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 bfcache-Blockierungsdaten mit einer geeigneten Methode wie Performance.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 oben gezeigten Code-Snippets protokollieren NotRestoredReasons-Objekte in der Konsole. Diese Objekte haben die 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:

children Schreibgeschützt Experimentell

Ein Array von NotRestoredReasons-Objekten, eines für jedes eingebettete iframe im aktuellen Dokument, das Gründe enthalten kann, warum der Top-Level-Frame in Bezug auf die Kinder-Frames blockiert wurde. Jedes Objekt hat die gleiche Struktur wie das Elternelement – auf diese Weise können beliebig viele Ebenen von eingebetteten <iframe>s rekursiv innerhalb des Objekts dargestellt werden. Wenn der Frame keine Kinder hat, ist das Array leer; wenn das Dokument in einem cross-origin <iframe> ist, gibt children null zurück.

id Schreibgeschützt Experimentell

Ein String, der den Wert des id-Attributs des <iframe>, in dem das Dokument enthalten ist, darstellt (zum Beispiel <iframe id="foo" src="...">). Wenn das Dokument nicht in einem <iframe> oder das <iframe> keine id gesetzt hat, gibt id null zurück.

name Schreibgeschützt Experimentell

Ein String, der den Wert des name-Attributs des <iframe>, in dem das Dokument enthalten ist, darstellt (zum Beispiel <iframe name="bar" src="...">). Wenn das Dokument nicht in einem <iframe> oder das <iframe> keinen name gesetzt hat, gibt name null zurück.

reasons Schreibgeschützt Experimentell

Ein Array von NotRestoredReasonDetails-Objekten, die jeweils einen Grund darstellen, warum die navigierte Seite daran gehindert wurde, den bfcache zu nutzen. Wenn das Dokument in einem cross-origin <iframe> ist, gibt reasons null zurück, aber das Elterndokument kann einen reason von "masked" anzeigen, wenn irgendein <iframe> den bfcache für den Top-Level-Frame blockierte. Siehe Blockierungsgründe für weitere Details zu den Gründen.

src Schreibgeschützt Experimentell

Ein String, der den Pfad zur Quelle des <iframe>, in dem das Dokument enthalten ist, darstellt (zum Beispiel <iframe src="exampleframe.html">). Wenn das Dokument nicht in einem <iframe> ist, gibt src null zurück.

url Schreibgeschützt Experimentell

Ein String, der die URL der navigierten Seite oder des <iframe> darstellt. Wenn das Dokument in einem cross-origin <iframe> ist, gibt url null zurück.

Wenn eine Seite gleichoriginäre <iframe>s eingebettet hat, enthält der zurückgegebene notRestoredReasons-Wert ein Array von Objekten innerhalb der children-Eigenschaft, die die Blockierungsgründe in Bezug auf jeden eingebetteten 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"
}

Wenn eine Seite cross-origin Frames eingebettet hat, ist die Menge der geteilten Informationen über diese begrenzt, um das Auslaufen von cross-origin Informationen zu verhindern. Es werden nur Informationen einbezogen, die die äußere Seite bereits kennt, und ob der cross-origin Teilbaum die bfcache-Blockierung verursachte oder nicht. Keine Blockierungsgründe oder Informationen über tiefere Ebenen des Teilbaums (auch wenn einige Unterebenen gleichoriginär 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"
}

Für alle cross-origin <iframe>s werden keine Blockierungsgründe gemeldet; für den 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 verwendet werden kann, um user-agent-spezifische Gründe zu verbergen; es zeigt nicht immer ein Problem in einem <iframe> an.

Es gibt viele verschiedene Gründe, warum eine Blockierung auftreten kann. Obwohl die Gründe standardisiert sind, sollten Entwickler vermeiden, sich auf bestimmte Formulierungen zu verlassen, und darauf vorbereitet sein, dass neue Gründe hinzugefügt oder gelöscht werden.

Die in der Spezifikation aufgeführten Werte sind:

"fetch"

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

"lock"

Beim Entladen wurden gehaltene Sperren und Sperranfragen abgebrochen, sodass die Seite nicht in einem stabilen Zustand war, 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 sie hinderten die Speicherung im bfcache.
• Das aktuelle Dokument konnte aus benutzerspezifischen Gründen nicht im bfcache gespeichert werden.

"navigation-failure"

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

"parser-aborted"

Das aktuelle Dokument hat seine anfängliche HTML-Analyse nie abgeschlossen, und die Speicherung des unfertigen Dokuments im bfcache wurde verhindert.

"websocket"

Beim Entladen wurde eine offene WebSocket-Verbindung abgebrochen, sodass die Seite nicht in einem stabilen Zustand war, der im bfcache gespeichert werden konnte.

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

"audio-capture"

Das Dokument hat die Erlaubnis zur Audioaufnahme angefordert, indem es Media Capture und Streams' getUserMedia() mit Audio verwendet hat.

"background-work"

Das Dokument hat Hintergrundarbeit angefordert, indem es die Methoden register() des SyncManager, register() des PeriodicSyncManager oder fetch() des BackgroundFetchManager aufgerufen hat.

"broadcastchannel-message"

Während die Seite im Back/forward-Cache gespeichert war, erhielt eine BroadcastChannel-Verbindung auf der Seite eine Nachricht und das Nachrichtenereignis wurde ausgelöst.

"idbversionchangeevent"

Das Dokument hatte ein ausstehendes IDBVersionChangeEvent beim Entladen.

"idledetector"

Das Dokument hatte einen aktiven IdleDetector beim Entladen.

"keyboardlock"

Beim Entladen war die Tastatursperre noch aktiv, weil die Methode lock() des Keyboard aufgerufen wurde.

"mediastream"

Ein MediaStreamTrack befand sich im Live-Zustand beim Entladen.

"midi"

Das Dokument hat eine MIDI-Erlaubnis angefordert, indem es navigator.requestMIDIAccess() aufgerufen hat.

"modals"

Benutzermeldungen wurden beim Entladen gezeigt.

"navigating"

Während des Entladens war das Laden noch im Gange, und daher war das Dokument nicht in einem Zustand, der im Back/forward-Cache gespeichert werden konnte.

"navigation-canceled"

Die Navigationsanforderung wurde durch Aufrufen von window.stop() abgebrochen und die Seite war nicht in einem Zustand, um im Back/forward-Cache gespeichert zu werden.

"non-trivial-browsing-context-group"

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

"otpcredential"

Das Dokument hat ein OTPCredential erstellt.

"outstanding-network-request"

Beim Entladen hatte das Dokument ausstehende Netzwerk-Anfragen und war nicht in einem Zustand, der im Back/forward-Cache gespeichert werden konnte.

"paymentrequest"

Das Dokument hatte eine aktive PaymentRequest beim Entladen.

"pictureinpicturewindow"

Das Dokument hatte ein aktives PictureInPictureWindow beim Entladen.

"plugins"

Das Dokument enthielt Plugins.

"request-method-not-get"

Das Dokument wurde aus einer HTTP-Anfrage erstellt, deren Methode nicht GET 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, deren Cache-Control-Header das "no-store"-Token enthielt.

"response-cache-control-no-cache"

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

"response-keep-alive"

Das Dokument wurde aus einer HTTP-Antwort erstellt, die einen Keep-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 nicht okay war.

"rtc"

Während des Entladens wurde eine RTCPeerConnection oder RTCDataChannel heruntergefahren, sodass die Seite nicht in einem Zustand war, der im Back/forward-Cache gespeichert werden konnte.

"sensors"

Das Dokument hat den Zugriff auf Sensoren angefordert.

"serviceworker-added"

Der Service-Worker-Client des Dokuments begann, während die Seite im Back/forward-Cache war, von einem Service-Worker gesteuert zu werden.

"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 empfing während die Seite im Back/forward-Cache war eine Nachricht.

"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 Registrierung des Service-Workers des Service-Worker-Clients des Dokuments wurde abgemeldet, während die Seite im Back/forward-Cache war.

"sharedworker"

Dieses Dokument befand sich im Eigentümer-Set eines SharedWorkerGlobalScope.

"smartcardconnection"

Das Dokument hatte eine aktive SmartCardConnection beim Entladen.

"speechrecognition"

Das Dokument hatte eine aktive SpeechRecognition beim Entladen.

"storageaccess"

Das Dokument forderte Speicherzugriffserlaubnis an, indem es die Storage Access API verwendete.

"unload-listener"

Das Dokument registrierte einen Ereignis-Listener für das unload Ereignis.

"video-capture"

Das Dokument hat die Erlaubnis zur Videoaufnahme angefordert, indem es Media Capture und Streams' getUserMedia() mit Video verwendet hat.

"webhid"

Das Dokument rief die Methode requestDevice() der WebHID API auf.

"webshare"

Das Dokument verwendete die Methode navigator.share() der Web Share API.

"webtransport"

Während des Entladens wurde eine offene WebTransport-Verbindung heruntergefahren, sodass die Seite nicht in einem Zustand war, der im Back/forward-Cache gespeichert werden konnte.

"webxrdevice"

Das Dokument erstellte ein XRSystem.

• notRestoredReasons API-Erklärung
• PerformanceNavigationTiming.notRestoredReasons
• NotRestoredReasons