Interfejs API stanu strony internetowej notRestoredReasons

Dowiedz się, które elementy nawigacyjne i dlaczego nie mogą korzystać z pamięci podręcznej stanu strony internetowej.

Chris Mills
Barry Pollard

Właściwość notRestoredReasons dodana do klasy PerformanceNavigationTiming przekazuje informacje o tym, czy ramki znajdujące się w dokumencie nie mogły korzystać z bfcache podczas nawigacji, i dlaczego. Deweloperzy mogą wykorzystać te informacje, aby zidentyfikować strony, które wymagają aktualizacji, aby zapewnić zgodność z pamięcią podręczną Bfcache, a tym samym zwiększyć wydajność witryny.

Obecny stan,

Interfejs notRestoredReasons API został wprowadzony z Chrome 123 i jest wdrażany stopniowo.

Pojęcia i wykorzystanie

Nowoczesne przeglądarki oferują funkcję optymalizacji przeglądania historii zwaną pamięcią podręczną stanu strony internetowej (bfcache). Umożliwia to błyskawiczne ładowanie, gdy użytkownicy wracają na stronę, którą już odwiedzili. Strony mogą nie być uwzględniane w pamięci podręcznej stanu strony internetowej lub zostać wykluczone z pamięci podręcznej z różnych powodów. Niektóre z nich wymagają specyfikacji, a inne są związane z implementacjami w przeglądarce.

Wcześniej deweloperzy nie mogli dowiedzieć się, dlaczego ich strony nie mogły korzystać z pamięci podręcznej stanu strony internetowej, chociaż przeprowadzano test w narzędziach deweloperskich w Chrome. Aby umożliwić monitorowanie w tym polu, klasa PerformanceNavigationTiming została rozszerzona o właściwość notRestoredReasons. Spowoduje to zwrócenie obiektu zawierającego powiązane informacje w górnej ramce i we wszystkich elementach iframe w dokumencie:

  • Powody, dla których nie można użyć pamięci podręcznej stanu strony internetowej.

  • Szczegóły takie jak ramka id i name, które ułatwiają identyfikowanie elementów iframe w kodzie HTML.

    Dzięki temu programiści mogą podjąć działania, aby strony były zgodne z pamięcią podręczną w pamięci podręcznej, a tym samym poprawiały wydajność witryny.

Przykłady

Instancja PerformanceNavigationTiming można uzyskać z funkcji takich jak Performance.getEntriesByType() czy PerformanceObserver.

Możesz na przykład wywołać poniższą funkcję, aby zwrócić wszystkie obiekty PerformanceNavigationTiming znajdujące się na osi czasu wydajności i zarejestrować ich notRestoredReasons:

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

W przypadku elementów nawigacyjnych w historii właściwość PerformanceNavigationTiming.notRestoredReasons zwraca obiekt o następującej strukturze, który reprezentuje zablokowany stan ramki najwyższego poziomu:

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

Właściwości:

children
Tablica obiektów reprezentujących zablokowany stan dowolnych ramek tej samej domeny umieszczonych w ramce najwyższego poziomu. Każdy obiekt ma tę samą strukturę co obiekt nadrzędny – dzięki temu w obiekcie rekurencyjnym może być reprezentowana dowolna liczba poziomów osadzonych klatek. Jeśli ramka nie ma elementów potomnych, tablica jest pusta.
id
Ciąg znaków reprezentujący wartość atrybutu id ramki (np. <iframe id="foo" src="...">). Jeśli ramka nie ma elementu id, wartością będzie null. W przypadku strony najwyższego poziomu jest to null.
name
Ciąg znaków reprezentujący wartość atrybutu name ramki (np. <iframe name="bar" src="...">). Jeśli ramka nie ma elementu name, wartością będzie pusty ciąg znaków. W przypadku strony najwyższego poziomu jest to null.
reasons
Tablica ciągów tekstowych, z których każdy odpowiada za przyczynę zablokowania odwiedzonej strony przed użyciem funkcji bfcache. Blokowanie może mieć wiele różnych przyczyn. Więcej informacji znajdziesz w sekcji Przyczyny blokowania.
src
Ciąg znaków reprezentujący ścieżkę do źródła ramki (np. <iframe src="b.html">). Jeśli ramka nie ma parametru src, wartością będzie pusty ciąg znaków. W przypadku strony najwyższego poziomu jest to null.
url
Ciąg znaków reprezentujący adres URL odwiedzanej strony/elementu iframe.

W przypadku obiektów PerformanceNavigationTiming, które nie reprezentują nawigacji w historii, właściwość notRestoredReasons zwróci wartość null.

Pamiętaj, że notRestoredReasons zwraca też wartość null, jeśli nie ma żadnych powodów blokowania, więc ta wartość null nie oznacza, że bufor bfcache został użyty lub nie został użyty. Aby to zrobić, musisz użyć właściwości event.persisted.

Zgłaszanie blokowania pamięci podręcznej Bfcache w ramkach z tej samej domeny

Jeśli na stronie są umieszczone ramki z tej samej domeny, zwrócona wartość notRestoredReasons będzie zawierać obiekt we właściwości children, który reprezentuje zablokowany stan każdej umieszczonej ramki.

Na przykład:

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

Zgłaszanie blokowania pamięci podręcznej Bfcache w ramkach z innych domen

Gdy na stronie są umieszczone ramki z innych domen, ograniczamy ilość udostępnianych informacji o nich, aby zapobiec wyciekom informacji z innych domen. Uwzględniamy tylko te informacje, które strona zewnętrzna już zna, oraz informacje o tym, czy poddrzewo z innej domeny blokuje element bfcache. Nie podajemy żadnych powodów blokowania ani informacji o niższych poziomach drzewa podrzędnego (nawet jeśli niektóre podpoziomy pochodzą z tej samej domeny).

Na przykład:

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

W przypadku wszystkich elementów iframe z innych domen raportujemy null dla wartości reasons ramki, a ramka najwyższego poziomu – wartość "masked". Pamiętaj, że atrybut "masked" może być też używany do celów związanych z klientami użytkownika, więc nie zawsze wskazuje problem w elemencie iframe.

Aby dowiedzieć się więcej o kwestii bezpieczeństwa i prywatności, zapoznaj się z sekcją Bezpieczeństwo i prywatność w objaśnieniu.

Przyczyny blokowania

Jak już wspomnieliśmy, może to wynikać z wielu różnych przyczyn:

Oto kilka najczęstszych przyczyn, dla których nie można używać pamięci podręcznej stanu strony internetowej:

  • unload-listener: strona rejestruje moduł obsługi unload, co uniemożliwia użycie pamięci podręcznej Bfcache w niektórych przeglądarkach. Więcej informacji znajdziesz w sekcji Wycofywanie zdarzenia wyładowania.
  • response-cache-control-no-store: strona używa no-store jako wartości cache-control.
  • related-active-contents: strona została otwarta na innej stronie (przy użyciu „zduplikowanej karty”), która nadal zawiera odniesienie do tej strony.

Prześlij opinię

Zespół Chromium chce poznać Twoją opinię o interfejsie API bfcache notRestoredReasons.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje Ci metod lub właściwości, których potrzebujesz, by zrealizować swój pomysł? Masz pytanie lub komentarz na temat modelu zabezpieczeń? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub podziel się uwagami na temat istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd związany z implementacją Chromium? Czy implementacja różni się od specyfikacji? Zgłoś błąd w naszym narzędziu do rejestrowania problemów. Podaj jak najwięcej szczegółów, proste instrukcje odtworzenia i określ komponent jako UI > Browser > Navigation > BFCache. Usługa Glitch świetnie nadaje się do szybkiego i łatwego udostępniania poprawek.

Pokaż wsparcie dla interfejsu API

Czy zamierzasz korzystać z interfejsu API bfcache notRestoredReasons? Twoje publiczne wsparcie pomaga zespołowi Chromium priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest, aby wspierać te funkcje.

Wyślij tweeta na adres @ChromiumDev, używając hashtagu #NotRestoredReasons, i poinformuj nas, gdzie i jak go używasz.

Przydatne linki