Geri-ileri önbellek notRestoredReasons API'sı

Hangi gezinmelerin bfcache'i kullanmasının engellendiğini ve neden engellendiğini öğrenin.

Chris Mills
Barry Pollard

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

Mevcut durum

notRestoredReasons API, Chrome 123 sürümünden gönderildi ve kademeli olarak kullanıma sunuluyor.

Kavramlar ve kullanım

Modern tarayıcılar geçmişte gezinme için geri-ileri önbellek (bfcache) adı verilen bir optimizasyon özelliği sağlar. Bu, kullanıcılar daha önce ziyaret ettikleri bir sayfaya geri döndüğünde hızlı yükleme deneyimi sağlar. Sayfaların bfcache'ye girmesi engellenebilir veya bfcache'dayken farklı nedenlerle çıkarılabilir. Bazı nedenlerle bir spesifikasyon gereklidir, bazıları da tarayıcı uygulamalarına özgüdür.

Daha önce, Chrome geliştirici araçlarında bir test yapılmasına rağmen geliştiricilerin, sayfalarında bfcache kullanmasının neden engellendiğini öğrenmeleri mümkün değildi. Sahada izlemeyi etkinleştirmek için PerformanceNavigationTiming sınıfı, notRestoredReasons özelliğini içerecek şekilde genişletildi. Bu, üst çerçeve ve belgedeki tüm iFrame'lerle ilgili bilgileri içeren bir nesne döndürür:

  • Kullanıcının bfcache'i kullanmasının engellenme nedenleri.

  • HTML'de iframe'lerin tanımlanmasına yardımcı olacak id ve name çerçevesi gibi ayrıntılar.

    Bu sayede geliştiriciler, bu sayfaları bfcache uyumlu hale getirmek için işlem yapabilir ve böylece site performansını artırabilir.

Örnekler

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

Örneğin, performans zaman çizelgesindeki tüm PerformanceNavigationTiming nesnelerini döndürmek ve bunların 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ş gezinmeler için PerformanceNavigationTiming.notRestoredReasons özelliği, ü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/"
}

Tesisler aşağıdaki gibidir:

children
Üst düzey çerçeveye yerleştirilmiş tüm aynı kaynaklı çerçevelerin engellenen durumunu temsil eden bir nesne dizisi. Her nesne, üst nesneyle aynı yapıya sahiptir. Bu sayede, nesne içinde herhangi bir sayıda yerleştirilmiş çerçeve seviyesi yinelemeli olarak temsil edilebilir. Çerçevenin alt öğesi yoksa dizi boş olur.
id
Çerçevenin id özellik değerini temsil eden bir dize (ör. <iframe id="foo" src="...">). Çerçevede id yoksa değer null olur. Üst düzey sayfa için bu değer null'tür.
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'tür.
reasons
Her biri, yönlendirilen sayfanın bfcache'i kullanmasının engellenmesinin nedenini temsil eden bir dize dizisi. Engellemenin birçok farklı nedeni olabilir. Daha fazla bilgi için Engelleme nedenleri bölümüne bakın.
src
Çerçevenin kaynağına giden yolu temsil eden bir dize (örneğin <iframe src="b.html">). Çerçevede src yoksa değer boş bir dize olur. Üst düzey sayfa için null değerini alır.
url
Gezinilen sayfanın/iFrame'in URL'sini temsil eden bir dize.

Geçmiş gezinmelerini temsil etmeyen PerformanceNavigationTiming nesneleri için notRestoredReasons mülkü null değerini döndürür.

Engelleme nedeni olmadığında notRestoredReasons'ün de null döndürdüğünü unutmayın. Bu nedenle, null değerinin döndürülmesi bfcache'in kullanıldığı veya kullanılmadığı anlamına gelmez. Bunun için event.persisted özelliğini kullanmanız gerekir.

Aynı kaynaktan çerçevelerde bfcache engellemesini bildirme

Bir sayfada aynı kaynaktan çerçeveler yerleştirilmişse döndürülen notRestoredReasons değeri, her yerleşik çerçevenin engellenen durumunu temsil eden children mülkünün 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 engellemesini bildirme

Bir sayfaya kaynak farklı çerçeveler yerleştirildiğinde, kaynak farklı 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 kaynak alt ağacının bfcache'i engelleyip engellemediğini ekleriz. Engelleme nedenleri veya alt ağacın alt seviyeleriyle ilgili bilgiler (bazı alt seviyeler aynı kaynaktan olsa bile) dahil edilmez.

Ö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 kaynak dışı iFrame'ler için çerçevenin reasons değeri olarak null değerini bildiririz ve üst düzey çerçevede "masked" nedeni gösterilir. "masked"'ün, kullanıcı aracısına özgü nedenlerle de kullanılabileceğini ve bu nedenle her zaman bir iframe'de sorun olduğunu göstermeyebileceğini unutmayın.

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

Engelleme nedenleri

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

Aşağıda, bfcache'in kullanılamamasının en yaygın nedenlerinden bazılarına örnekler verilmiştir:

  • unload-listener: Sayfa, belirli tarayıcılarda bfcache kullanımını engelleyen bir unload işleyicisini kaydediyor. Daha fazla bilgi için unload etkinliğinin kullanımdan kaldırılması başlıklı makaleyi inceleyin.
  • response-cache-control-no-store: Sayfa, cache-control değeri olarak no-store değerini kullanıyor.
  • related-active-contents: Sayfa, bu sayfaya hala referans veren başka bir sayfadan ("yinelenen sekme" kullanılarak) açılmış.

Geri bildirim

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

API tasarımı hakkında bilgi verin

API ile ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? Sorun İzleyicimizde hata bildirin. Mümkün olduğunca fazla ayrıntı ekleyin, yeniden oluşturmayla ilgili basit talimatlar verin ve bileşeni UI > Browser > Navigation > BFCache olarak belirtin. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için idealdir.

API'yi destekleme

bfcache notRestoredReasons API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

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

Faydalı bağlantılar