Finden Sie heraus, welche Navigationen von der Verwendung des bfcache ausgeschlossen wurden und warum.
Die Eigenschaft notRestoredReasons, die der Klasse PerformanceNavigationTiming hinzugefügt wurde, gibt Informationen dazu, ob und warum im Dokument vorhandene Frames den bfcache bei der Navigation nicht verwenden konnten. Entwickler können diese Informationen verwenden, um Seiten zu identifizieren, die aktualisiert werden müssen, um sie bfcache-kompatibel zu machen und so die Website-Leistung zu verbessern.
Aktueller Status
Die notRestoredReasons API wurde über Chrome 123 ausgeliefert und wird schrittweise eingeführt.
Konzepte und Verwendung
Moderne Browser bieten eine Optimierungsfunktion für die Verlaufsnavigation, den sogenannten Back-Forward-Cache (bfcache). Dadurch wird ein sofortiges Laden ermöglicht, wenn Nutzer zu einer Seite zurückkehren, die sie bereits besucht haben. Im bfcache können Seiten aus verschiedenen Gründen daran gehindert werden, in den bfcache zu gelangen oder sie gelöscht zu werden. Dies kann verschiedene Gründe haben, die zum Teil aufgrund einer Spezifikation erforderlich sind oder speziell für Browserimplementierungen erforderlich sind.
Bisher konnten Entwickler nicht herausfinden, warum ihre Seiten für die Verwendung des bfcache vor Ort blockiert wurden. Es gab jedoch einen Test in den Chrome-Entwicklertools. Um das Monitoring in diesem Feld zu aktivieren, wurde die Klasse PerformanceNavigationTiming um das Attribut notRestoredReasons erweitert. Dadurch wird ein Objekt mit zugehörigen Informationen im obersten Frame und in allen im Dokument vorhandenen iFrames zurückgegeben:
- Gründe, warum sie daran gehindert wurden, den bfcache zu verwenden.
Details wie Frame
idundnamezur Identifizierung von iFrames im HTML-CodeAuf diese Weise können Entwickler Maßnahmen ergreifen, um diese Seiten für den bfcache-kompatibel zu machen und so die Websiteleistung zu verbessern.
Beispiele
Eine PerformanceNavigationTiming-Instanz kann über Features wie Performance.getEntriesByType() und PerformanceObserver abgerufen werden.
Sie könnten beispielsweise die folgende Funktion aufrufen, um alle PerformanceNavigationTiming-Objekte zurückzugeben, die in der Leistungszeitachse vorhanden sind, und deren notRestoredReasons zu protokollieren:
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);
}
}
Für Verlaufsnavigation gibt das Attribut PerformanceNavigationTiming.notRestoredReasons ein Objekt mit der folgenden Struktur zurück, die den blockierten Zustand des Frames auf oberster Ebene darstellt:
{
children: [],
id: null,
name: null,
reasons: [
{"reason", "unload-listener"}
],
src: null,
url: "https://www.example.com/page/"
}
Die Eigenschaften sind:
children- Ein Array von Objekten, die den Sperrstatus aller Frames desselben Ursprungs darstellen, die in den Frame der obersten Ebene eingebettet sind. Jedes Objekt hat die gleiche Struktur wie das übergeordnete Objekt. Auf diese Weise kann eine beliebige Anzahl von Ebenen eingebetteter Frames innerhalb des Objekts rekursiv dargestellt werden. Wenn der Frame keine untergeordneten Elemente hat, ist das Array leer.
id- Ein String, der den
id-Attributwert des Frames darstellt (z. B.<iframe id="foo" src="...">). Wenn der Frame keinenid-Wert hat, ist der Wertnull. Für die Seite auf oberster Ebene ist diesnull. name- Ein String, der den
name-Attributwert des Frames darstellt (z. B.<iframe name="bar" src="...">). Wennnamefür den Frame nicht vorhanden ist, ist der Wert ein leerer String. Für die Seite auf oberster Ebene ist diesnull. reasons- Ein Array mit Strings, die jeweils einen Grund dafür darstellen, warum die Seite, auf der der bfcache nicht verwendet werden konnte. Es gibt viele verschiedene Gründe für eine Blockierung. Weitere Informationen findest du im Abschnitt Blockiergründe.
src- Ein String, der den Pfad zur Quelle des Frames darstellt, z. B.
<iframe src="b.html">. Wenn der Frame keinesrchat, ist der Wert ein leerer String. Für die Seite auf oberster Ebene ist diesnull. url- Ein String, der die URL der Seite bzw. des iFrames darstellt, auf die der Nutzer weitergeleitet wurde.
Für PerformanceNavigationTiming-Objekte, die keine Verlaufsnavigationen darstellen, gibt das Attribut notRestoredReasons den Wert null zurück.
notRestoredReasons gibt auch null zurück, wenn es keine Blockierungsgründe gibt. Dieser Wert ist also kein Indikator dafür, dass der bfcache verwendet wurde oder nicht.null Dafür musst du die Property event.persisted verwenden.
bfcache-Blockierung in Frames mit demselben Ursprung melden
Wenn auf einer Seite Frames mit demselben Ursprung eingebettet sind, enthält der zurückgegebene notRestoredReasons-Wert ein Objekt innerhalb der children-Eigenschaft, das den blockierten Zustand jedes eingebetteten Frames darstellt.
Beispiel:
{
children: [
{
children: [],
id: "iframe-id",
name: "iframe-name",
reasons: [],
src: "./index.html",
url: "https://www.example.com/"
},
{
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"
}
bfcache-Blockierung in ursprungsübergreifenden Frames melden
Wenn auf einer Seite ursprungsübergreifende Frames eingebettet sind, begrenzen wir die Menge der Informationen, die über sie geteilt werden, um das Verbreiten von ursprungsübergreifenden Informationen zu vermeiden. Wir berücksichtigen nur Informationen, die der äußeren Seite bereits bekannt sind, und ob die ursprungsübergreifende Unterstruktur den bfcache blockiert hat oder nicht. Es werden weder Blockierungsgründe noch Informationen zu niedrigeren Ebenen der Unterstruktur berücksichtigt (auch wenn untergeordnete Ebenen denselben Ursprung haben).
Beispiel:
{
children: [
{
children: [],
id: "iframe-id",
name: "iframe-name",
reasons: [],
src: "./index.html",
url: "https://www.example2.com/"
}
],
id: null,
name: null,
reasons: [
{"reason": "masked"}
],
src: null,
url:"https://www.example.com"
}
Für alle ursprungsübergreifenden iFrames wird null für den Wert reasons für den Frame gemeldet und für den Frame auf oberster Ebene wird der Grund "masked" angezeigt. "masked" kann auch speziell für den User-Agent verwendet werden und weist daher nicht immer auf ein Problem in einem iFrame hin.
Weitere Informationen zu Sicherheits- und Datenschutzaspekten finden Sie in der Erklärung im Abschnitt Sicherheit und Datenschutz.
Gründe für die Blockierung
Wie bereits erwähnt, gibt es viele verschiedene Gründe für eine Blockierung:
Im Folgenden finden Sie Beispiele für einige der häufigsten Gründe, warum bfcache nicht verwendet werden kann:
unload-listener: Die Seite registriert einenunload-Handler, wodurch die bfcache-Nutzung in bestimmten Browsern verhindert wird. Weitere Informationen finden Sie unter Unload-Ereignis verwerfen.response-cache-control-no-store: Die Seite verwendetno-storealscache-control-Wert.related-active-contents: Die Seite wurde entweder über einen „Duplizieren-Tab“ über eine andere Seite geöffnet, die noch einen Verweis auf diese Seite enthält.
Feedback
Das Chromium-Team möchte mehr über deine Erfahrungen mit der bfcache notRestoredReasons API wissen.
Erzähl uns etwas über das API-Design
Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die Sie zur Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Reichen Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.
Problem mit der Implementierung melden
Hast du einen Fehler bei der Implementierung von Chromium gefunden? Oder weicht die Implementierung von der Spezifikation ab?
Über unseren Issue Tracker können Sie Programmfehler melden. Gib so viele Details wie möglich und eine einfache Anleitung zur Reproduktion an und gib die Komponente als UI > Browser > Navigation > BFCache an.
Glitch eignet sich hervorragend, um schnelle und einfache Reproduktionen zu teilen.
Unterstützung für die API anzeigen
Möchtest du die bfcache notRestoredReasons API verwenden? Dein öffentlicher Support hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig der Support für sie ist.
Schicken Sie uns unter dem Hashtag #NotRestoredReasons einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie ihn verwenden.