Hier sehen Sie, welche Navigationsvorgänge aufgrund von bfcache-Blockierungen nicht ausgeführt wurden und warum.
Die Property notRestoredReasons, die der Klasse PerformanceNavigationTiming hinzugefügt wurde, gibt Aufschluss darüber, ob Frames im Dokument bei der Navigation daran gehindert wurden, den bfcache zu verwenden, und warum. Anhand dieser Informationen können Entwickler Seiten identifizieren, die aktualisiert werden müssen, damit sie mit dem bfcache kompatibel sind. So lässt sich die Websiteleistung verbessern.
Aktueller Status
Die notRestoredReasons API ist seit Chrome 123 verfügbar und wird nach und nach eingeführt.
Konzepte und Nutzung
Moderne Browser bieten eine Optimierungsfunktion für die Verlaufsnavigation, den Back-Forward-Cache (bfcache). So können Nutzer eine Seite, die sie bereits besucht haben, sofort laden. Seiten können aus verschiedenen Gründen daran gehindert werden, in den bfcache zu gelangen, oder aus dem bfcache entfernt werden. Einige Gründe sind in einer Spezifikation festgelegt, andere sind spezifisch für Browserimplementierungen.
Bisher konnten Entwickler nicht herausfinden, warum die Verwendung des BFCache auf ihren Seiten blockiert wurde. Es gab jedoch einen Test in den Chrome-Entwicklertools. Damit das Monitoring im Feld aktiviert werden kann, wurde die Klasse PerformanceNavigationTiming um die Eigenschaft notRestoredReasons erweitert. Dadurch wird ein Objekt mit zugehörigen Informationen zum oberen Frame und allen im Dokument vorhandenen iFrames zurückgegeben:
- Gründe, warum sie die bfcache nicht verwenden konnten.
Details wie Frame
idundnamehelfen dabei, iFrames im HTML-Code zu identifizieren.So können Entwickler Maßnahmen ergreifen, um diese Seiten mit dem bfcache kompatibel zu machen und so die Websiteleistung zu verbessern.
Beispiele
Eine PerformanceNavigationTiming-Instanz kann über Funktionen wie Performance.getEntriesByType() und PerformanceObserver abgerufen werden.
Sie können beispielsweise die folgende Funktion aufrufen, um alle PerformanceNavigationTiming-Objekte in der Zeitachse für die Leistung 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);
}
}
Bei Verlaufsnavigationen gibt die Eigenschaft PerformanceNavigationTiming.notRestoredReasons ein Objekt mit der folgenden Struktur zurück, das den blockierten Status des Frames der obersten 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 blockierten Status von Frames mit demselben Ursprung darstellen, die im Frame der obersten Ebene eingebettet sind. Jedes Objekt hat dieselbe Struktur wie das übergeordnete Objekt. So kann eine beliebige Anzahl von Ebenen eingebetteter Frames rekursiv im Objekt dargestellt werden. Wenn der Frame keine untergeordneten Elemente hat, ist das Array leer.
id- Ein String, der den Attributwert
iddes 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 keinname-Attribut hat, ist der Wert ein leerer String. Für die Seite der obersten Ebene ist dasnull. reasons- Ein Array von Strings, die jeweils einen Grund dafür darstellen, warum die aufgerufene Seite nicht im bfcache gespeichert wurde. Es gibt viele verschiedene Gründe, warum es zu einer Sperrung kommen kann. Weitere Informationen finden Sie im Abschnitt Sperrgründe.
src- Ein String, der den Pfad zur Quelle des Frames darstellt (z. B.
<iframe src="b.html">). Wenn der Frame keinsrchat, ist der Wert ein leerer String. Für die Seite der obersten Ebene ist dasnull. url- Ein String, der die URL der aufgerufenen Seite/des aufgerufenen iFrames darstellt.
Für PerformanceNavigationTiming-Objekte, die keine Verlaufsnavigationen darstellen, gibt die notRestoredReasons-Eigenschaft null zurück.
Beachten Sie, dass notRestoredReasons auch null zurückgibt, wenn keine blockierenden Gründe vorliegen. null ist also kein Indikator dafür, ob der bfcache verwendet wurde oder nicht. Dazu müssen Sie 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 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 Cross-Origin-Frames melden
Wenn auf einer Seite ursprungsübergreifende Frames eingebettet sind, beschränken wir die Menge der Informationen, die über sie weitergegeben werden, um ursprungsübergreifende Informationen nicht preiszugeben. Wir geben nur Informationen an, die auf der äußeren Seite bereits bekannt sind, und ob der ursprungsübergreifende Unterbaum den BFCache blockiert hat oder nicht. Wir geben keine Sperrgründe oder Informationen zu niedrigeren Ebenen des Unterbaums an, auch wenn einige Unterebenen 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 reasons-Wert des Frames gemeldet und für den Frame auf oberster Ebene wird der Grund "masked" angezeigt. "masked" kann auch aus Gründen verwendet werden, die mit dem User-Agent zusammenhängen. Es muss also nicht immer ein Problem in einem iFrame vorliegen.
Weitere Informationen zu Sicherheits- und Datenschutzaspekten finden Sie im Abschnitt Sicherheit und Datenschutz in der Erläuterung.
Gründe für die Blockierung
Wie bereits erwähnt, kann es viele verschiedene Gründe für eine Sperrung geben:
Im Folgenden finden Sie einige Beispiele für die häufigsten Gründe, warum der bfcache nicht verwendet werden kann:
unload-listener: Auf der Seite wird einunload-Handler registriert, der die Verwendung von BFCache in bestimmten Browsern verhindert. Weitere Informationen finden Sie unter Einstellung des Unload-Ereignisses.response-cache-control-no-store: Auf der Seite wirdno-storealscache-control-Wert verwendet.related-active-contents: Die Seite wurde über eine andere Seite geöffnet (entweder über „Tab duplizieren“), die noch einen Verweis auf diese Seite enthält.
Feedback
Das Chromium-Team möchte mehr über Ihre Erfahrungen mit der notRestoredReasons-API für den Back-Forward-Cache erfahren.
Informationen zum API-Design
Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie Fragen oder Anmerkungen zum Sicherheitsmodell? Melden Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository oder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.
Problem mit der Implementierung melden
Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab?
Melden Sie einen Fehler in unserem Tool zur Problemverfolgung. Geben Sie so viele Details wie möglich an, fügen Sie eine einfache Anleitung zur Reproduktion hinzu und geben Sie die Komponente als UI > Browser > Navigation > BFCache an.
API-Support zeigen
Beabsichtigen Sie, die bfcache notRestoredReasons API zu verwenden? Ihr öffentlicher Support 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 die Funktion verwenden.