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 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
idvenameç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ç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ğına giden yolu temsil eden bir dize (örneğin
<iframe src="b.html">). Çerçevedesrcyoksa değer boş bir dize olur. Üst düzey sayfa içinnulldeğ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 birunloadiş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-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 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.