Back-Forward-Cache notRestoredReasons API

Hier sehen Sie, welche Navigationen die Verwendung des bfcaches blockiert haben und warum.

Chris Mills
Barry Pollard

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 Navigation im Browserverlauf, den Back-Forward-Cache (bfcache). So wird ein sofortiges Laden ermöglicht, wenn Nutzer zu einer Seite zurückkehren, die sie bereits besucht haben. Seiten können aus verschiedenen Gründen daran gehindert werden, in den bfcache aufgenommen zu werden, oder sie werden aus dem bfcache entfernt. Einige dieser Gründe sind durch eine Spezifikation vorgeschrieben, andere sind spezifisch für Browserimplementierungen.

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 id und name, 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);
  }
}

Bei Navigationen im Browserverlauf gibt die PerformanceNavigationTiming.notRestoredReasons-Eigenschaft ein Objekt mit der folgenden Struktur zurück, das den blockierten Status des Top-Level-Frames darstellt:

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

Die Properties 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 kein id hat, ist der Wert null. Für die Seite der obersten Ebene ist das null.
name
Ein String, der den name-Attributwert des Frames darstellt (z. B. <iframe name="bar" src="...">). Wenn der Frame kein name hat, ist der Wert ein leerer String. Für die Seite der obersten Ebene ist das null.
reasons
Ein Array von Strings, die jeweils einen Grund darstellen, warum die Seite, auf die Sie geleitet wurden, von der Verwendung des bfcache ausgeschlossen wurde. 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 keine src hat, ist der Wert ein leerer String. Für die Seite der obersten Ebene ist das null.
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. Dazu müssen Sie die Property event.persisted verwenden.

Blockierung von bfcache in Frames mit gleichem 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"
}

Blockierung von bfcache in Cross-Origin-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 unterliegen.

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 einen unload-Handler, der die Verwendung des BFCache in bestimmten Browsern verhindert. Weitere Informationen finden Sie unter Einstellung des Ereignisses „unload“.
  • response-cache-control-no-store: Auf der Seite wird no-store als cache-control-Wert verwendet.
  • 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

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie zur Implementierung 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

Beabsichtigen Sie, die bfcache notRestoredReasons API zu 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.

Nützliche Links