Deze pagina is vertaald door de Cloud Translation API.

Terug/voorwaartse cache notRestoredReasons API

Ontdek welke navigaties de bfcache niet konden gebruiken en waarom.

Chris Mills

Barry Pollard

De eigenschap notRestoredReasons , toegevoegd aan de klasse PerformanceNavigationTiming , geeft informatie over de vraag of frames in het document werden geblokkeerd voor het gebruik van bfcache tijdens navigatie, en waarom. Ontwikkelaars kunnen deze informatie gebruiken om pagina's te identificeren die moeten worden bijgewerkt om ze bfcache-compatibel te maken, waardoor de siteprestaties verbeteren.

Huidige status

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

Concepten en gebruik

Moderne browsers bieden een optimalisatiefunctie voor navigatie via de geschiedenis, genaamd de back/forward cache (bfcache). Dit zorgt voor een snelle laadervaring wanneer gebruikers terugkeren naar een pagina die ze al eerder hebben bezocht. Pagina's kunnen om verschillende redenen worden geblokkeerd voor de bfcache of eruit worden verwijderd, sommige vanwege specificaties en andere vanwege specifieke browserimplementaties.

Voorheen konden ontwikkelaars niet achterhalen waarom hun pagina's geen gebruik konden maken van bfcache, hoewel er wel een test beschikbaar was in de Chrome-ontwikkelaarstools . Om monitoring in de praktijk mogelijk te maken, is de klasse PerformanceNavigationTiming uitgebreid met een eigenschap notRestoredReasons . Deze eigenschap retourneert een object met relevante informatie over het bovenste frame en alle iframes in het document.

Redenen waarom ze geen gebruik konden maken van de bfcache.
Details zoals frame- id en name , om iframes in de HTML te identificeren.
Dit stelt ontwikkelaars in staat om actie te ondernemen om die pagina's bfcache-compatibel te maken, waardoor de siteprestaties verbeteren.

Voorbeelden

Een PerformanceNavigationTiming instantie 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 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 navigatiegeschiedenis retourneert de eigenschap PerformanceNavigationTiming.notRestoredReasons een object met de volgende structuur, dat de geblokkeerde status van het frame op het hoogste niveau weergeeft:

{
  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 weergeven van alle frames van dezelfde oorsprong die in het hoofdframe zijn ingebed. Elk object heeft dezelfde structuur als het bovenliggende object; op deze manier kunnen een willekeurig aantal niveaus van ingebedde frames recursief in het object worden weergegeven. Als het frame geen onderliggende frames heeft, is de array leeg.
id: Een tekenreeks die de waarde van het id -attribuut van het frame vertegenwoordigt (bijvoorbeeld <iframe id="foo" src="..."> ). Als het frame geen id heeft, is de waarde null . Voor de hoofdpagina is dit null .
name: Een tekenreeks die de waarde van het name van het frame vertegenwoordigt (bijvoorbeeld <iframe name="bar" src="..."> ). Als het frame geen name heeft, is de waarde een lege tekenreeks. Voor de hoofdpagina is dit null .
reasons: Een array van strings, die elk een reden aangeven waarom de bezochte pagina geen gebruik kon maken van de bfcache. Er zijn veel verschillende redenen waarom een blokkering kan optreden. Zie de sectie ' Redenen voor blokkering' voor meer informatie.
src: Een tekenreeks die het pad naar de bron van het frame aangeeft (bijvoorbeeld <iframe src="b.html"> ). Als het frame geen src heeft, is de waarde een lege tekenreeks. Voor de hoofdpagina is dit null .
url: Een tekenreeks die de URL van de bezochte pagina/iframe vertegenwoordigt.

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

Merk op dat notRestoredReasons ook null retourneert wanneer er geen blokkerende redenen zijn, dus het feit dat dit null is, is geen indicator dat de bfcache wel of niet is gebruikt. Daarvoor moet je de event.persisted eigenschap gebruiken .

Rapporteer bfcache-blokkering in frames van dezelfde oorsprong.

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

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 frames van een andere oorsprong bevat, beperken we de hoeveelheid informatie die we erover delen om te voorkomen dat informatie van een andere oorsprong uitlekt. We delen alleen informatie die de externe pagina al kent, en of de substructuur van de andere oorsprong bfcache heeft geblokkeerd of niet. We delen geen redenen voor blokkering of informatie over lagere niveaus van de substructuur (zelfs niet 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 iframes van een andere oorsprong rapporteren we null als reasons voor het frame, en het frame op het hoogste niveau zal de reden "masked" weergeven. Houd er rekening mee dat "masked" ook kan worden gebruikt voor gebruikersagentspecifieke redenen en dus niet altijd een probleem in een iframe hoeft aan te geven.

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

Redenen voor blokkering

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

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

unload-listener : de pagina registreert een unload handler, waardoor het gebruik van bfcache in bepaalde browsers wordt voorkomen. Zie ' Het unload-evenement 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 vanuit een andere pagina (bijvoorbeeld via "tabblad dupliceren") die nog steeds een verwijzing naar deze pagina bevat.

Feedback

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

Vertel ons iets over het API-ontwerp.

Werkt er iets aan de API niet zoals 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 specificatieprobleem in op de bijbehorende GitHub-repository , of voeg je gedachten toe aan een bestaand probleem.

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 via onze bugtracker . Vermeld daarbij zoveel mogelijk details, eenvoudige instructies voor het reproduceren van het probleem en geef aan dat het om de component gaat: UI > Browser > Navigation > BFCache .

Toon je steun voor de API

Ben je 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 het gebruikt.