Hier sehen Sie, welche Navigationen die Verwendung des bfcaches blockiert haben und warum.
Die Property notRestoredReasons, die der Klasse PerformanceNavigationTiming hinzugefügt wurde, enthält Informationen dazu, ob Frames im Dokument bei der Navigation die Verwendung des bfcache blockiert wurden und warum. Anhand dieser Informationen können Entwickler Seiten identifizieren, die aktualisiert werden müssen, damit sie bfcache-kompatibel sind. So lässt sich die Websiteleistung verbessern.
Aktueller Status
Die notRestoredReasons API ist seit Chrome 123 verfügbar 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 blockiert werden, sodass sie nicht in den bfcache gelangen oder entfernt werden können. Manche davon sind aufgrund von Spezifikationen erforderlich, andere wiederum sind für Browserimplementierungen spezifisch.
Bisher gab es keine Möglichkeit für Entwickler, herauszufinden, warum die Verwendung des bfcache auf ihren Seiten blockiert wurde. Es gab jedoch einen Test in den Chrome-Entwicklertools. Um das Monitoring vor Ort zu ermöglichen, wurde die Klasse PerformanceNavigationTiming um eine notRestoredReasons-Property erweitert. Dies gibt ein Objekt mit zugehörigen Informationen zum oberen Frame und allen Iframes im Dokument zurück:
- Gründe, warum die Nutzung des bfcache für den Nutzer blockiert wurde.
Details wie Frame
idundname, die helfen, Iframes in der HTML-Datei zu identifizieren.So können Entwickler Maßnahmen ergreifen, um diese Seiten 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önnen beispielsweise die folgende Funktion aufrufen, um alle PerformanceNavigationTiming-Objekte im Leistungszeitplan zurückzugeben und ihre 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, das den blockierten Status aller Frames desselben Ursprungs darstellt, die im Frame der obersten Ebene eingebettet sind. Jedes Objekt hat dieselbe Struktur wie das übergeordnete Objekt. So kann innerhalb des Objekts rekursiv eine beliebige Anzahl von Ebenen eingebetteter Frames 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 keinidhat, ist der Wertnull. Für die Seite der obersten Ebene ist dasnull. name- Ein String, der den
name-Attributwert des Frames darstellt (z. B.<iframe name="bar" src="...">). Wenn der Frame keinnamehat, ist der Wert ein leerer String. Für die Seite der obersten Ebene ist dasnull. reasons- Ein Array mit Strings, die jeweils einen Grund angeben, warum die Seite, auf der der bfcache nicht verwendet werden konnte. Es gibt viele verschiedene Gründe, warum eine Blockierung erfolgen kann. Weitere Informationen finden Sie im Abschnitt Gründe für die Blockierung.
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 der obersten Ebene ist dasnull. url- Ein String, der die URL der Seite bzw. des Iframes darstellt, zu der bzw. dem die Navigation erfolgt.
Für PerformanceNavigationTiming-Objekte, die keine Navigationen im Verlauf darstellen, gibt die Eigenschaft notRestoredReasons null zurück.
Hinweis: notRestoredReasons gibt auch null zurück, wenn es keine Gründe für eine Blockierung gibt. null ist also kein Indikator dafür, ob der bfcache verwendet wurde oder nicht. Dafür musst du die Property event.persisted verwenden.
Blockierung von bfcache in Frames desselben Ursprungs melden
Wenn auf einer Seite Frames mit demselben Ursprung eingebettet sind, enthält der zurückgegebene notRestoredReasons-Wert ein Objekt in der children-Eigenschaft, das den blockierten Status 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 seitenübergreifende Frames eingebettet sind, beschränken wir die Menge der freigegebenen Informationen, um Datenlecks zu vermeiden. Wir geben nur Informationen an, die der äußeren Seite bereits bekannt sind, und ob der plattformübergreifende untergeordnete Knoten den bfcache blockiert hat oder nicht. Wir geben keine Gründe für die Blockierung oder Informationen zu niedrigeren Ebenen des untergeordneten Knotens an, auch wenn einige untergeordnete Ebenen demselben Ursprung zugewiesen sind.
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 iframes mit unterschiedlichen Ursprüngen wird null als Wert für reasons für den Frame angegeben. Der Frame auf oberster Ebene hat den Grund "masked". Hinweis: "masked" kann auch aus nutzeragentenspezifischen Gründen verwendet werden und weist nicht immer auf ein Problem in einem Iframe hin.
Weitere Informationen zu den Sicherheits- und Datenschutzaspekten finden Sie im Abschnitt Sicherheit und Datenschutz.
Gründe für die Blockierung
Wie bereits erwähnt, kann es viele verschiedene Gründe für eine Blockierung geben:
Im Folgenden finden Sie einige der häufigsten Gründe, warum der bfcache nicht verwendet werden kann:
unload-listener: Die Seite registriert einenunload-Handler, der die Verwendung des BFCache in bestimmten Browsern verhindert. Weitere Informationen finden Sie unter Einstellung des Ereignisses „unload“.response-cache-control-no-store: Die Seite verwendetno-storealscache-control-Wert.related-active-contents: Die Seite wurde über eine andere Seite geöffnet (entweder über den Tab „Duplizieren“), die noch einen Verweis auf diese Seite enthält.
Feedback
Das Chromium-Team möchte mehr über Ihre Erfahrungen mit der bfcache notRestoredReasons API erfahren.
Informationen zum 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 Fragen oder Kommentare zum Sicherheitsmodell? Reichen Sie ein Problem mit der Spezifikation im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.
Problem mit der Implementierung melden
Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?
Melden Sie den Fehler in unserem Issue Tracker. Geben Sie dabei so viele Details wie möglich an, machen Sie eine einfache Anleitung zur Reproduktion und geben Sie die Komponente als UI > Browser > Navigation > BFCache an.
Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.
Unterstützung für die API anzeigen
Möchtest du die bfcache notRestoredReasons API verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.
Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #NotRestoredReasons und teilen Sie uns mit, wo und wie Sie ihn verwenden.