Geri-ileri önbellek notRestoredReasons API'sı

Hangi gezinmelerin bfcache kullanmasının engellendiğini ve nedenini öğrenin.

Chris Mills
Barry Pollard

PerformanceNavigationTiming sınıfına eklenen notRestoredReasons özelliği, dokümandaki karelerin gezinme sırasında bfcache kullanmasının engellenip engellenmediğini ve bunun nedenini bildirir. Geliştiriciler bu bilgileri kullanarak güncelleme gerektiren sayfaları bfcache ile uyumlu hale getirebilir ve böylece site performansını iyileştirebilirler.

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'deyken bazıları farklı nedenlerle çıkarılabilir. Bazılarının bir spesifikasyon gerektirdiği, bazıları da tarayıcı uygulamalarına özgü olabilir.

Daha önce, geliştiricilerin, Chrome geliştirici araçlarında bir test yapmasına rağmen sayfalarında bfcache'yi kullanmanın neden engellendiğini öğrenmeleri mümkün değildi. Sahada izlemeyi etkinleştirmek için PerformanceNavigationTiming sınıfı, bir notRestoredReasons mülkünü içerecek şekilde genişletildi. Bu komut, dokümanda bulunan üst çerçevede ve tüm iframe'lerde ilgili bilgileri içeren bir nesne döndürür:

  • Bfcache'i kullanmalarının engellenme nedenleri.

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

    Bu, geliştiricilerin bu sayfaları Bfcache ile uyumlu hale getirmek için harekete geçmelerine olanak tanıyarak site performansını iyileştirmelerini sağlar.

Örnekler

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

Ö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ş gezinmeleri 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/"
}

Mülkler aşağıdaki gibidir:

children
Üst düzey çerçeveye yerleştirilmiş aynı kaynaklı çerçevelerin engellenmiş durumunu temsil eden bir nesne dizisi. Her nesne üst nesne ile aynı yapıya sahiptir. Bu şekilde, nesnenin içinde istediğiniz sayıda yerleşik çerçeve düzeyi yinelemeli olarak gösterilebilir. Çerçevede alt öğe yoksa dizi boş olur.
id
Çerçevenin id özellik değerini temsil eden bir dize (örneğin, <iframe id="foo" src="...">). Çerçevede id yoksa değer null olur. Üst düzey sayfa için null değeri.
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 null değeri.
reasons
Her biri, ziyaret edilen sayfada bfcache kullanılmasının neden engellendiğini temsil eden dize dizisi. Engelleme işleminin birçok farklı nedeni vardır. 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ğeri.
url
Gidilen sayfanın/iframe'in URL'sini temsil eden bir dize.

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

notRestoredReasons işlevinin engelleme nedeni olmadığında da null değerini döndürdüğünü unutmayın. Bu nedenle, null olması, bfcache'nin kullanıldığını veya kullanılmadığını bir gösterge olarak kabul etmez. Bunun için event.persisted özelliğini kullanmanız gerekir.

Aynı kaynak çerçevelerde bfcache engellemesini raporla

Bir sayfaya aynı kaynak çerçeveler yerleştirildiğinde, döndürülen notRestoredReasons değeri children özelliğinin içinde, her yerleştirilmiş çerçevenin engelleme durumunu temsil eden 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 raporla

Bir sayfaya kaynaklar arası çerçeveler yerleştirildiğinde, kaynaklar arası bilgilerin sızdırılmasını önlemek için bunlarla ilgili paylaşılan bilgi miktarını sınırlarız. Yalnızca dış sayfanın zaten bildiği bilgileri ve kaynaklar arası alt ağacın bfcache'yi engelleyip engellemediğini dahil ederiz. Alt ağacın alt düzeyleri hakkında herhangi bir engelleme nedeni veya bilgi (bazı alt düzeyler aynı kaynağa sahip 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 çapraz kaynak iframe'lerde çerçevenin reasons değeri için null değerini raporlarız ve üst düzey çerçeve "masked" nedenini gösterir. "masked" etiketinin kullanıcı aracısına özel nedenlerle de kullanılabileceğini, dolayısıyla her zaman bir iframe'de sorun teşkil etmeyebileceğini unutmayın.

Güvenlik ve gizlilikle ilgili dikkat edilmesi gereken noktalar hakkında daha ayrıntılı bilgi için açıklamadaki Güvenlik ve gizlilik bölümüne bakın.

Engelleme nedenleri

Daha önce söylediğimiz gibi, engellemenin birçok farklı nedeni vardır:

Aşağıda, bfcache'nin kullanılamamasının en yaygın nedenlerinden bazılarına dair ö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 Kaldırma etkinliği desteğinin sonlandırılması bölümüne bakın.
  • response-cache-control-no-store: Sayfa, cache-control değeri olarak no-store değerini kullanıyor.
  • related-active-contents: Sayfa, hâlâ bu sayfaya referans veren başka bir sayfadan ("kopya sekme" kullanılarak) açılmış.

Geri bildirim

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

Bize API tasarımı hakkında bilgi verin

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

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? Sorun izleyicimizde hata bildirin. Olabildiğince çok ayrıntıyı, çoğaltmaya ilişkin basit talimatları eklediğinizden ve bileşeni UI > Browser > Navigation > BFCache olarak belirttiğinizden emin olun. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteğinizi gösterin

bfcache notRestoredReasons API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik olduğunu gösterir.

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

Faydalı bağlantılar