Hangi gezinmelerin bfcache'i kullanmasının engellendiğini ve neden engellendiğini öğrenin.
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'ten itibaren kullanıma sunulmuştur ve kademeli olarak kullanıma sunulmaktadır.
Kavramlar ve kullanım
Modern tarayıcılar, geçmiş gezinme için geri/ileri önbelleği (bfcache) adlı 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 sunulur. Sayfaların bfcache'e girmesi engellenebilir veya bfcache'teyken bazı spesifikasyonlar nedeniyle ya da tarayıcı uygulamalarına özgü farklı nedenlerle bfcache'ten çıkarılabilir.
Önceden, Chrome geliştirici araçlarında bir test olsa da geliştiricilerin sayfalarının neden alanda bfcache kullanmasının engellendiğini öğrenmesinin bir yolu yoktu. 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'deki iFrame'leri tanımlamaya yardımcı olan çerçeve
idvenamegibi 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 ç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 mülkü, üst düzey çerçevenin engellenen 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ş 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çevedeidyoksa değernullolur. Üst düzey sayfa için bu değernull'tür. name- Çerçevenin
nameözellik değerini temsil eden bir dize (örneğin,<iframe name="bar" src="...">). Çerçevedenameyoksa değer boş bir dize olur. Üst düzey sayfa için bu değernull'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ğının yolunu temsil eden bir dize (örneğin,
<iframe src="b.html">). Çerçevedesrcyoksa değer boş bir dize olur. Üst düzey sayfa için bu değernull'tü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 işlevinin de null değerini 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 düzeyleriyle ilgili bilgiler (bazı alt düzeyler 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 birunloadişleyici kaydeder. 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-controldeğeri olarakno-storedeğ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 sorunları bildirme
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.