Geri-ileri önbellek notRestoredReasons API'sı

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

Chris Mills

PerformanceNavigationTiming sınıfına eklenen notRestoredReasons özelliği, dokümanda bulunan çerçevelerin gezinmede bfcache kullanmasının engellenip engellenmediği ve bunun nedeni ile ilgili bilgileri bildirir. Geliştiriciler bu bilgileri, bfcache ile uyumlu hale getirmek üzere güncellenmesi gereken sayfaları belirleyerek site performansını iyileştirmek için kullanabilirler.

Mevcut durum

Adım Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturma Başlatılmadı
3. Geri bildirim alma ve tasarımı yineleme Devam ediyor
4. Kaynak denemesi Başladı
5. Lansman Başlatılmadı

bfcache notRestoredReasons API'yi deneyin

Sürüm 109'dan itibaren bfcache notRestoredReasons API, Chromium'da kaynak deneme sürümü olarak kullanılabilir. Bu özelliğin yayın planıyla ilgili güncel bilgileri, özelliğin ChromeStatus.com özellik sayfasını ziyaret ederek bulabilirsiniz (sürüm yayın tarihleri için Chrome yol haritasına bakın).

Kaynak deneme sürümüne kaydolarak ve denemelerinizde kullanarak bfcache notRestoredReasons API'yi deneyebilirsiniz. Kaydolduktan sonra jetonunuzu nasıl kullanacağınızla ilgili talimatlar için Kaynak denemesine katılma başlıklı makaleyi inceleyin.

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 sayede, kullanıcılar daha önce ziyaret ettikleri bir sayfaya geri döndüklerinde anında yükleme deneyimi sağlanır. Sayfaların bfcache'e girilmesi veya bfcache'deyken çıkartılması, bazıları spesifikasyonların gerektirdiği ve bazıları ise tarayıcı uygulamalarına özgü olmak üzere farklı nedenlerle çıkarılabilir.

Chrome geliştirici araçlarında bir test yapılsa da geliştiricilerin, sayfalarının sahada neden bfcache kullanılmasının engellendiğini öğrenmeleri mümkün değildi. Sahada izlemeyi etkinleştirmek için PerformanceNavigationTiming sınıfı bir notRestoredReasons özelliğini içerecek şekilde genişletildi. Bu komut, dokümandaki tüm çerçevelerle ilgili ilgili bilgileri içeren bir nesneyi döndürür:

  • HTML'de tanımlamanıza yardımcı olacak id ve name gibi ayrıntılar.
  • Bfcache kullanmasının engellenip engellenmediği.

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

    Bu, geliştiricilerin bu sayfaları bfcache uyumlu hale getirmek için gereken işlemleri yapmasını sağlayarak site performansını artırmasını sağlar.

Örnekler

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

Örneğin, şu anda performans zaman çizelgesinde mevcut olan tüm PerformanceNavigationTiming nesnelerini döndürmek ve bunların notRestoredReasons değerini 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 nesneyi döndürür:

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

Özellikler aşağıdaki gibidir:

blocked
Gezilen sayfanın bfcache (true) kullanmasının engellenip engellenmediğini (false) belirten bir boole değeridir.
children
Üst düzey çerçeveye yerleştirilmiş herhangi bir karenin engellenme durumunu temsil eden nesne dizisi. Her nesne üst nesneyle aynı yapıya sahiptir. Bu şekilde, herhangi bir sayıda yerleşik çerçeve düzeyi nesnenin içinde yinelemeli olarak gösterilebilir. Çerçevenin alt öğesi yoksa dizi boş olur.
id
Çerçevenin id özellik değerini temsil eden bir dize (örneğin, <iframe id="foo" src="...">). Çerçevenin id değeri yoksa değer boş bir dize olur.
name
Çerçevenin name özellik değerini temsil eden bir dize (örneğin, <iframe name="bar" src="...">). Çerçevenin name değeri yoksa değer boş bir dize olur.
reasons
Her biri, ziyaret edilen sayfanın bfcache kullanılmasının neden engellendiğini temsil eden bir dize dizisi. Engelleme, birçok farklı nedenden kaynaklanabilir. Daha fazla bilgi edinmek için aşağıdaki 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.
url
Gezilen sayfanın URL'sini temsil eden bir dize.

Geçmiş gezinmelerini temsil etmeyen PerformanceNavigationTiming nesneleri için notRestoredReasons özelliği null değerini döndürür. Bu, bfcache'in belirli bir gezinmeyle ilgili olup olmadığının belirlenmesinde yararlıdır. Desteklenmeyen notRestoredReasons durumunda ise undefined sonucunu döndürür.

Aynı kaynak çerçevelerinde bfcache engellemesini raporlama

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

Örneğin:

{
  blocked: false,
  children: [
    { url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
    { url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Kaynaklar arası çerçevelerde bfcache engellemesini raporlama

Bir sayfada yerleştirilmiş çapraz kaynak çerçeveleri olduğunda, kaynaklar arası bilgilerin sızdırılmasını önlemek için bu sayfalarla ilgili paylaşılan bilgi miktarını sınırlarız. Yalnızca dış sayfanın zaten bildiği bilgiler ve çapraz kaynak alt ağacının bfcache'i engelleyip engellemediği bilgisi dahil edilir. Engelleme nedenleri veya alt ağaç düzeyleriyle ilgili bilgiler (bazı alt düzeyler aynı kaynakta olsa bile) dahil edilmez.

Örneğin:

{
  blocked: false,
  children: [
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
    /* cross-origin frame */
    { url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Birden fazla kaynaklar arası çerçevenin engelleme nedenleri varsa rastgele bir çapraz kaynak iframe'i seçer ve bunun bfcache'i engelleyip engellemediğini raporlarız. Geri kalan kareler için blocked değeri olarak null değerini raporlarız. Bunun amacı, kötü niyetli kişilerin, bir sayfaya birden fazla üçüncü taraf çerçevesi yerleştirerek ve ardından her birindeki engelleme bilgilerini karşılaştırarak kontrol etmedikleri sitelerdeki kullanıcı durumuyla ilgili çıkarımlarda bulunmalarını önlemektir.

{
  blocked: false,
  children: [
    /* cross-origin frames */
    {url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
    {url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
    {url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
  ]
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Güvenlik ve gizlilik konusunda dikkat edilmesi gereken noktalar hakkında daha fazla bilgi için açıklayıcıdaki Güvenlik ve gizlilik bölümüne bakın.

Engelleme nedenleri

Daha önce belirttiğimiz gibi, engellemenin birçok farklı nedeni vardır. Tüm neden dizelerini gösteren ve ne anlama geldiğini açıklayan kullanışlı bir e-tablo derledik.

Bu nedenlerden bahsetmeye değer birkaç ana kategori vardır:

  • Circumstantial: Bu, geliştiricinin sayfa koduyla doğrudan ilgili olmayan engelleme nedenlerini ifade eder. Örneğin, ilgili bir bileşen çökmüş, yükleme sürecinde bir sorun olmuştur, sayfa önbelleğe alınamayan geçici bir durumdur, yetersiz bellek nedeniyle bfcache devre dışı bırakılmıştır veya Service Worker'ın sayfada önbelleğe alınmasını engelleyen bir işlem yapılmıştır.
  • Extensions: Mesajların uzantılarla ilgili birkaç farklı nedeni vardır. Genellikle birçok farklı nedeni "Uzantılar" nedeninde birleştiririz. Kullanıcının hangi uzantıları yüklediği, sayfada hangi uzantıların etkin olduğu, ne yaptığı gibi konular hakkında çok fazla bilgi vermek istemediğimizden, uzantıyla ilgili engelleme nedenleri konusunda kasıtlı olarak muğlaklık yaparız.
  • PageSupportNeeded: Geliştiricinin kodu, bfcache engellemesi yapmayan ancak şu anda bfcache engellemesi olan bir web platformu özelliği kullanıyor. Örneğin, sayfada şu anda kayıtlı işleyicileri olan bir BroadcastChannel veya açık bir IndexedDB bağlantısı bulunuyor. Veya sayfa, şu anda bfcache'in bazı tarayıcılarda kullanılmasını engelleyen bir unload işleyici kaydetmiştir.
  • SupportPending: Geliştiricinin kodu, sayfayı bfcache'den diskalifiye eden bir web platformu özelliği kullanıyor. Örneğin, Web Serial API, Web Authentication API, File System Access API veya Media Session API. Sayfada, şu anda bfcache'in bazı tarayıcılarda kullanılmasını engelleyen Cache-Control: no-store kullanılıyor olabilir. Bu kategori, ekran okuyucu veya Chrome şifre yöneticisi gibi sayfanın dışında kalan ve bfcache'yi engelleyen bir aracın varlığını bildirmek için de kullanılır.

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 durum mu var? Fikrinizi uygulamak için gereken yöntem veya özellikler eksik mi? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var? İlgili [GitHub deposunda][geri bildirim] bölümüne özellik sorunu bildirin veya mevcut bir sorunla ilgili düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden, yeniden oluşturmaya 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ği gösterin

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ı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.

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

Faydalı bağlantılar