Terug/voorwaartse cache notRestoredReasons API

Ontdek welke navigaties zijn geblokkeerd voor het gebruik van de bfcache, en waarom.

Chris Mills
Barry Pollard

De eigenschap notRestoredReasons , toegevoegd aan de klasse PerformanceNavigationTiming , rapporteert informatie over de vraag of frames in het document zijn geblokkeerd voor het gebruik van de 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 prestaties van de site worden verbeterd.

Huidige status

De notRestoredReasons API is afkomstig uit Chrome 123 en wordt geleidelijk uitgerold.

Concepten en gebruik

Moderne browsers bieden een optimalisatiefunctie voor geschiedenisnavigatie, de back/forward cache (bfcache). Dit maakt een onmiddellijke laadervaring mogelijk wanneer gebruikers terugkeren naar een pagina die ze al hebben bezocht. Pagina's kunnen om verschillende redenen worden geblokkeerd voor toegang tot de bfcache of worden uitgezet terwijl ze zich in bfcache bevinden, sommige vereist door een specificatie en sommige specifiek voor browserimplementaties.

Voorheen konden ontwikkelaars er op geen enkele manier achter komen waarom hun pagina's werden geblokkeerd voor het gebruik van de bfcache in het veld, hoewel er wel een test was in Chrome dev tools . Om monitoring in het veld mogelijk te maken, is de klasse PerformanceNavigationTiming uitgebreid met de eigenschap notRestoredReasons . Dit retourneert een object met gerelateerde informatie over het bovenste frame en alle iframes die in het document aanwezig zijn:

  • Redenen waarom ze de bfcache niet konden gebruiken.

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

    Hierdoor kunnen ontwikkelaars actie ondernemen om die pagina's bfcache-compatibel te maken, waardoor de prestaties van de site worden verbeterd.

Voorbeelden

Een PerformanceNavigationTiming -instantie kan worden verkregen uit functies zoals Performance.getEntriesByType() en PerformanceObserver .

U kunt bijvoorbeeld de volgende functie aanroepen om alle PerformanceNavigationTiming objecten te retourneren die aanwezig zijn in de prestatietijdlijn en hun notRestoredReasons te loggen:

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, die 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 vertegenwoordigen van frames van dezelfde oorsprong die zijn ingebed in het frame op het hoogste niveau. Elk object heeft dezelfde structuur als het bovenliggende object. Op deze manier kan een willekeurig aantal niveaus van ingebedde frames recursief in het object worden weergegeven. Als het frame geen kinderen 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 array van tekenreeksen die elk een reden vertegenwoordigen waarom de genavigeerde pagina werd geblokkeerd voor het gebruik van de bfcache. Er zijn veel verschillende redenen waarom blokkering kan optreden. Zie het gedeelte Blokkeerredenen voor meer details.
src
Een tekenreeks die het pad naar de bron van het frame vertegenwoordigt (bijvoorbeeld <iframe src="b.html"> ). Als het frame geen src heeft, is de waarde een lege string. Voor de pagina op het hoogste niveau is dit null .
url
Een tekenreeks die de URL van de genavigeerde pagina/iframe vertegenwoordigt.

Voor PerformanceNavigationTiming -objecten die geen geschiedenisnavigatie vertegenwoordigen, retourneert de eigenschap notRestoredReasons null .

Houd er rekening mee dat notRestoredReasons ook null retourneert als er geen blokkeringsredenen zijn. Het feit dat null is, is dus geen indicatie dat de bfcache wel of niet werd gebruikt. Daarvoor moet u de eigenschap event.persisted gebruiken .

Rapporteer bfcache-blokkering in frames van dezelfde oorsprong

Wanneer op een pagina frames van dezelfde oorsprong zijn ingesloten, bevat de geretourneerde waarde notRestoredReasons een object binnen 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 op een pagina cross-origin-frames zijn ingesloten, beperken we de hoeveelheid informatie die over de pagina wordt gedeeld om te voorkomen dat er cross-origin-informatie lekt. We nemen alleen informatie op die de buitenste pagina al kent, en of de cross-origin subboom bfcache heeft geblokkeerd of niet. We nemen geen blokkeringsredenen of informatie op over lagere niveaus van de subboom (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 vanwege de reasons voor het frame, en het frame op het hoogste niveau toont de reden "masked" . Houd er rekening mee dat "masked" ook kan worden gebruikt om gebruikersagentspecifieke redenen en dus niet altijd op een probleem in een iframe duidt.

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

Redenen voor blokkeren

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

Hieronder volgen voorbeelden van enkele van de meest voorkomende redenen waarom de bfcache niet kan worden gebruikt:

  • unload-listener : de pagina registreert een unload handler, die bfcache-gebruik 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 (ofwel met behulp van "duplicate tab") die nog steeds een verwijzing naar deze pagina heeft.

Feedback

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

Vertel ons over het API-ontwerp

Is 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? Heeft u een vraag of opmerking over het beveiligingsmodel? Dien een spec issue in op de corresponderende GitHub repository , of voeg uw gedachten toe aan een bestaand issue.

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chromium? Of wijkt de uitvoering af van de specificaties? Dien een bug in op onze issuetracker . Zorg ervoor dat u zoveel mogelijk details opneemt, eenvoudige instructies voor het reproduceren, en specificeer de component als UI > Browser > Navigation > BFCache . Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

Bent u van plan de bfcache notRestoredReasons API te gebruiken? Jouw 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 gebruikt.

Handige Links