Hangi gezinmelerin bfcache kullanmasının neden engellendiğini öğrenin.
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
vename
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çeveninid
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çeveninname
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çevedesrc
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 birunload
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ı engelleyenCache-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.