Terug/voorwaartse cache notRestoredReasons API

Ontdek welke navigatiefuncties het gebruik van bfcache blokkeerden en waarom.

Chris Mills
Barry Pollard

De eigenschap notRestoredReasons , toegevoegd aan de klasse PerformanceNavigationTiming , rapporteert informatie over of frames in het document werden geblokkeerd voor gebruik van bfcache bij navigatie, en waarom. Ontwikkelaars kunnen deze informatie gebruiken om pagina's te identificeren die updates nodig hebben om ze bfcache-compatibel te maken, waardoor de siteprestaties worden verbeterd.

Huidige status

De notRestoredReasons API is beschikbaar vanaf Chrome 123 en wordt geleidelijk uitgerold.

Begrippen en gebruik

Moderne browsers bieden een optimalisatiefunctie voor geschiedenisnavigatie, de zogenaamde back-forward cache (bfcache). Dit zorgt voor een directe laadervaring wanneer gebruikers terugkeren naar een pagina die ze al eerder hebben bezocht. Pagina's kunnen om verschillende redenen worden geblokkeerd voor toegang tot de bfcache of verwijderd terwijl ze in de bfcache staan, sommige vereist door een specificatie en andere specifiek voor browserimplementaties.

Voorheen was er geen manier voor ontwikkelaars om te achterhalen waarom hun pagina's de bfcache in het veld niet konden gebruiken, hoewel er wel een test was in Chrome Dev Tools . Om monitoring in het veld mogelijk te maken, is de klasse PerformanceNavigationTiming uitgebreid met een eigenschap notRestoredReasons . Dit retourneert een object met gerelateerde informatie over het bovenste frame en alle iframes in het document:

  • Redenen waarom ze de bfcache niet meer konden gebruiken.

  • Details zoals frame- id en name , om iframes in de HTML te kunnen identificeren.

    Hierdoor kunnen ontwikkelaars maatregelen treffen om deze pagina's bfcache-compatibel te maken en zo de prestaties van de site te verbeteren.

Voorbeelden

Een PerformanceNavigationTiming -exemplaar kan worden verkregen via functies zoals Performance.getEntriesByType() en PerformanceObserver .

U kunt bijvoorbeeld de volgende functie aanroepen om alle PerformanceNavigationTiming objecten in de prestatietijdlijn te retourneren en hun notRestoredReasons te registreren:

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);
  }
}

Voor geschiedenisnavigatie retourneert de eigenschap PerformanceNavigationTiming.notRestoredReasons een object met de volgende structuur, dat de geblokkeerde status van het frame op het hoogste niveau vertegenwoordigt:

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

De eigenschappen zijn als volgt:

children
Een array van objecten die de geblokkeerde status van alle frames van dezelfde oorsprong representeren die in het frame op het hoogste niveau zijn ingebed. Elk object heeft dezelfde structuur als het bovenliggende object. Op deze manier kan een willekeurig aantal niveaus van ingebedde frames recursief binnen het object worden gerepresenteerd. Als het frame geen onderliggende frames heeft, is de array leeg.
id
Een tekenreeks die de id -attribuutwaarde van het frame vertegenwoordigt (bijvoorbeeld <iframe id="foo" src="..."> ). Als het frame geen id heeft, is de waarde null . Voor de pagina op het hoogste niveau is dit null .
name
Een tekenreeks die de name van het frame vertegenwoordigt (bijvoorbeeld <iframe name="bar" src="..."> ). Als het frame geen name heeft, is de waarde een lege tekenreeks. Voor de pagina op het hoogste niveau is dit null .
reasons
Een reeks strings die elk een reden aangeven waarom de genavigeerde pagina het gebruik van de bfcache heeft geblokkeerd. Er zijn veel verschillende redenen waarom blokkering kan optreden. Zie het gedeelte ' Redenen voor blokkering' voor meer informatie.
src
Een tekenreeks die het pad naar de bron van het frame weergeeft (bijvoorbeeld <iframe src="b.html"> ). Als het frame geen src bevat, is de waarde een lege tekenreeks. Voor de pagina op het hoogste niveau is dit null .
url
Een tekenreeks die de URL van de genavigeerde pagina/iframe weergeeft.

Voor PerformanceNavigationTiming objecten die geen historische navigatie vertegenwoordigen, retourneert de eigenschap notRestoredReasons null .

Merk op dat notRestoredReasons ook null retourneert als er geen blokkerende redenen zijn. null is dus geen indicatie dat de bfcache wel of niet is gebruikt. Hiervoor moet u de eigenschap event.persisted gebruiken .

Rapporteer bfcache-blokkering in frames met dezelfde oorsprong

Wanneer een pagina ingesloten frames met dezelfde oorsprong bevat, bevat de geretourneerde notRestoredReasons waarde een object in de eigenschap children dat de geblokkeerde status van elk ingesloten frame vertegenwoordigt.

Bijvoorbeeld:

{
  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"
}

Rapporteer bfcache-blokkering in cross-origin frames

Wanneer een pagina cross-origin frames bevat, beperken we de hoeveelheid informatie die hierover wordt gedeeld om te voorkomen dat cross-origin informatie lekt. We nemen alleen informatie op die de buitenste pagina al kent en of de cross-origin subboom bfcache al dan niet heeft geblokkeerd. We nemen geen redenen voor blokkering of informatie over lagere niveaus van de subboom op (zelfs als sommige subniveaus dezelfde oorsprong hebben).

Bijvoorbeeld:

{
  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"
}

Voor alle cross-origin iframes rapporteren we null voor de reasons voor het frame, en het bovenste frame toont de reden "masked" . Houd er rekening mee dat "masked" ook kan worden gebruikt voor user-agent-specifieke redenen, wat niet altijd duidt op een probleem in een iframe.

Zie het gedeelte Beveiliging en privacy in de uitleg voor meer informatie over beveiligings- en privacyoverwegingen.

Redenen voor blokkering

Zoals we eerder al zeiden, zijn er verschillende redenen waarom blokkering kan optreden:

Hieronder staan ​​enkele van de meest voorkomende redenen waarom de bfcache niet kan worden gebruikt:

  • unload-listener : de pagina registreert een unload handler, die het gebruik van bfcache in bepaalde browsers voorkomt. Zie De unload-gebeurtenis afschaffen voor meer informatie.
  • response-cache-control-no-store : De pagina gebruikt no-store als cache-control waarde.
  • related-active-contents : De pagina is geopend vanaf een andere pagina (met behulp van "duplicate tab") die nog steeds een verwijzing naar deze pagina bevat.

Feedback

Het Chromium-team wil graag uw ervaringen met de bfcache notRestoredReasons API horen.

Vertel ons over het API-ontwerp

Werkt er iets aan de API dat niet werkt zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel? Dien een spec-issue in op de betreffende GitHub-repository of voeg je mening toe aan een bestaand issue.

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chromium? Of wijkt de implementatie af van de specificatie? Meld een bug in onze issue tracker . Zorg ervoor dat je zoveel mogelijk details opgeeft, eenvoudige instructies voor het reproduceren en het component specificeert als UI > Browser > Navigation > BFCache .

Toon ondersteuning voor de API

Bent u van plan de bfcache notRestoredReasons API te gebruiken? Uw publieke steun helpt het Chromium-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev met de hashtag #NotRestoredReasons en laat ons weten waar en hoe je deze hashtag gebruikt.

Nuttige links