Geri-ileri önbellek notRestoredReasons API'sı

Hangi gezinmelerin bfcache'in kullanılmasını engellediğini ve nedenini öğrenin.

Chris Mills
Barry Pollard

PerformanceNavigationTiming sınıfına eklenen notRestoredReasons özelliği, dokümanda bulunan çerçevelerin gezinme sırasında bfcache'i kullanmasının engellenip engellenmediği ve neden engellendiği hakkında bilgi verir. Geliştiriciler, bu bilgileri kullanarak sayfaları bfcache ile uyumlu hale getirmek için hangi sayfaların güncellenmesi gerektiğini belirleyebilir ve böylece site performansını artırabilir.

Mevcut durum

notRestoredReasons API, Chrome 123'ten itibaren kullanıma sunuldu ve kademeli olarak kullanıma açılıyor.

Kavramlar ve kullanım

Modern tarayıcılar, geçmişte gezinme için geri/ileri önbellek (bfcache) adı verilen bir optimizasyon özelliği sunar. Bu sayede, kullanıcılar daha önce ziyaret ettikleri bir sayfaya geri döndüklerinde anında yükleme deneyimi yaşar. Sayfalar, farklı nedenlerle bfcache'e girmekten engellenebilir veya bfcache'teyken bfcache'ten çıkarılabilir. Bu nedenlerden bazıları bir spesifikasyon tarafından zorunlu kılınırken bazıları tarayıcı uygulamalarına özgüdür.

Daha önce, geliştiricilerin sayfalarının alanda bfcache kullanmasının neden engellendiğini öğrenmesinin bir yolu yoktu. Ancak Chrome geliştirici araçlarında bir test vardı. Alanı izlemeyi etkinleştirmek için PerformanceNavigationTiming sınıfı, notRestoredReasons özelliğini içerecek şekilde genişletildi. Bu işlev, üst çerçeve ve dokümanda bulunan tüm iFrame'lerle ilgili bilgileri içeren bir nesne döndürür:

  • Geri/ileri önbelleğini kullanmalarının engellenme nedenleri.

  • HTML'deki iFrame'leri belirlemeye yardımcı olmak için çerçeve id ve name gibi ayrıntılar.

    Bu sayede geliştiriciler, söz konusu sayfaları bfcache ile uyumlu hale getirmek için harekete geçebilir ve böylece site performansını artırabilir.

Örnekler

PerformanceNavigationTiming örneği, Performance.getEntriesByType() ve PerformanceObserver gibi özelliklerden elde edilebilir.

Örneğin, performans zaman çizelgesinde bulunan tüm PerformanceNavigationTiming nesnelerini döndürmek ve notRestoredReasons değerlerini günlüğe kaydetmek için aşağıdaki işlevi çağırabilirsiniz:

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

Geçmiş gezinmelerinde PerformanceNavigationTiming.notRestoredReasons özelliği, en üst düzey çerçevenin engellenmiş durumunu temsil eden aşağıdaki yapıya sahip bir nesne döndürür:

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

Özellikler şunlardır:

children
Üst düzey çerçeveye yerleştirilmiş, aynı kaynaklı çerçevelerin engellenmiş durumunu temsil eden bir nesne dizisi. Her nesne, üst nesneyle aynı yapıya sahiptir. Bu sayede, nesnenin içinde herhangi bir sayıda yerleştirilmiş çerçeve düzeyi yinelemeli olarak temsil edilebilir. Çerçevede alt öğe yoksa dizi boş olur.
id
Çerçevenin id özellik değerini (ör. <iframe id="foo" src="...">) temsil eden bir dize. Çerçevede id yoksa değer null olur. Üst düzey sayfa için bu değer null olur.
name
Çerçevenin name özellik değerini temsil eden bir dize (örneğin <iframe name="bar" src="...">). Çerçevede name yoksa değer boş bir dize olur. Üst düzey sayfa için bu değer null olur.
reasons
Gezinilen sayfanın bfcache'in kullanılmasını engelleme nedenini temsil eden bir dizi dize. Engellemenin birçok farklı nedeni olabilir. Daha fazla bilgi için Engelleme nedenleri bölümüne bakın.
src
Çerçevenin kaynağının yolunu temsil eden bir dize (örneğin <iframe src="b.html">). Çerçevenin src yoksa değer boş bir dize olur. Üst düzey sayfa için bu değer null olur.
url
Gidilen sayfanın/iFrame'in URL'sini temsil eden bir dize.

Geçmişte gezinmeyi temsil etmeyen PerformanceNavigationTiming nesneleri için notRestoredReasons özelliği null değerini döndürür.

notRestoredReasons'nın, engelleyici neden olmadığında da null döndürdüğünü unutmayın. Bu nedenle, null olması, bfcache'in kullanılıp kullanılmadığını göstermez. Bunun için event.persisted özelliğini kullanmanız gerekir.

Aynı kaynaklı çerçevelerde bfcache engelleme bildirme

Bir sayfada aynı kaynaklı yerleştirilmiş çerçeveler varsa döndürülen notRestoredReasons değeri, her bir yerleştirilmiş çerçevenin engellenmiş durumunu temsil eden children özelliği içinde bir nesne içerir.

Örneğin:

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

Kaynaklar arası çerçevelerde bfcache engelleme hakkında rapor oluşturma

Bir sayfada kaynaklar arası yerleştirilmiş çerçeveler olduğunda, kaynaklar arası bilgilerin sızmasını önlemek için bu çerçeveler hakkında paylaşılan bilgi miktarını sınırlarız. Yalnızca dış sayfanın zaten bildiği bilgileri ve çapraz kaynaklı alt ağacın bfcache'i engelleyip engellemediğini dahil ederiz. Alt ağacın daha düşük seviyeleriyle ilgili engelleme nedenlerini veya bilgileri (bazı alt seviyeler aynı kaynaklı olsa bile) dahil etmeyiz.

Örneğin:

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

Tüm kaynaklar arası iFrame'ler için, çerçeveye ait reasons değeri olarak null raporlanır ve üst düzey çerçeve "masked" nedenini gösterir. "masked" öğesinin kullanıcı aracısına özgü nedenlerle de kullanılabileceğini ve her zaman bir iFrame'deki sorunu göstermeyebileceğini unutmayın.

Güvenlik ve gizlilikle ilgili hususlar hakkında daha fazla bilgi için açıklamadaki Güvenlik ve gizlilik bölümüne bakın.

Engelleme nedenleri

Daha önce de belirttiğimiz gibi, engellemenin birçok farklı nedeni olabilir:

bfcache'in kullanılamamasının en yaygın nedenlerinden bazılarına dair örnekleri aşağıda bulabilirsiniz:

  • unload-listener: Sayfa, belirli tarayıcılarda bfcache kullanımını engelleyen bir unload işleyici kaydeder. Daha fazla bilgi için unload etkinliğinin desteğini sonlandırma başlıklı makaleyi inceleyin.
  • response-cache-control-no-store: Sayfa, cache-control değeri olarak no-store kullanıyor.
  • related-active-contents: Sayfa, bu sayfaya hâlâ referans veren başka bir sayfadan ("Sekmeyi çoğalt" kullanılarak) açılmıştır.

Geri bildirim

Chromium ekibi, bfcache notRestoredReasons API'si ile ilgili deneyimlerinizi öğrenmek istiyor.

API tasarımı hakkında bilgi verin

API'nin beklendiğiniz gibi çalışmayan bir yönü var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun bildirme

Chromium'un uygulanmasıyla ilgili bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? Sorun izleyicimizde hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden, hatayı yeniden oluşturmak için basit talimatlar verdiğinizden ve bileşeni UI > Browser > Navigation > BFCache olarak belirttiğinizden emin olun.

API'ye desteğinizi gösterme

bfcache notRestoredReasons API'sini kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı satıcılarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

#NotRestoredReasons hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve nerede, nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar