Tarayıcı Önbelleği — Yeni Sürümü Yayına Aldın, Müşteri Neden Hâlâ Eskisini Görüyor?
Önce şunu oku: Tarayıcı Nasıl Çizer — Animasyon Neden Takılıyor?
30 saniyede özet
Tarayıcı dosyaları önbellekte tutar ve sunucunun söylediği kadar süre bir daha sormaz. HTML'i her seferinde ETag ile sor, adında içerik özeti olan dosyaları uzun süre sakla, hassas veriyi hiç saklatma.
Bankanın ücret broşürünü bir kez alıp evde saklıyorsun. Her seferinde şubeye gitmek yorucu, ama evdeki broşüre çok uzun süre güvenirsen fiyatlar değiştiğinde haberin olmaz.
-
Bayt: Ödeme ekranındaki hatayı düzelttim, yeni sürüm yayında!
-
Sen: Müşteri hâlâ aynı hatayı görüyor. Bir başkası ise boş beyaz bir sayfa.
-
Bayt: Sunucuda yeni kod var. Ben de görüyorum. Onlar neden görmüyor?
-
Bayt: Belki sunucuya hiç sormuyorlar. Tarayıcı ne kadar süre sormamasını söylemiştik?
Tarayıcı ne zaman sormaz?
Sunucu her dosyayla birlikte bir Cache-ControlSunucunun bir cevapla gönderdiği başlık: tarayıcının bu cevabı saklayıp saklamayacağını ve ne kadar süre sormadan kullanacağını söyler.Sözlükte gör → başlığı gönderir. max-age=86400 “bu dosyayı 24 saat boyunca bana sormadan kullan” demektir.
Bu süre içinde tarayıcı sunucuya hiç gitmez. Sayfa çok hızlı açılır, ama sen bu arada yeni sürüm yayına alsan bile müşteri eskisini görür.
Kafam karıştı, daha basit anlat
Cache-Control, tarayıcıya bir dosyayı ne kadar süre sormadan kullanacağını söyler. O süre bitmeden yeni sürüm görünmez.
Cache-Control: max-age=86400 tarayıcıya ne söyler?
HTML 24 saat önbellekte. Yeni sürüm yayına alındı. Müşteri bir saat sonra sayfayı açtı. Ne görür?
Sor, ama ucuza sor
HTML'i her seferinde sunucuya soruyoruz, ama app.js'i aynı adla 24 saat önbellekte tutuyoruz. Yeni sürüm yayına alındı. Müşteri ne görür? Cevabı göster
Yeni HTML ile eski JavaScript. HTML yeni geldi, ama app.js’in adı değişmediği için tarayıcı önbellekteki eski dosyayı kullandı. Bu karışım beyaz bir sayfaya bile yol açabilir.
Adım adım oku
- Her seferinde şubeye gidip broşür almak.
- Evdeki eski broşür: fiyatlar değişmiş.
- Ekim baskısı hâlâ geçerli mi? Evet.
- Baskı adı kapakta: yeni baskı, yeni broşür.
ETagBir dosyanın sürümünü gösteren kısa etiket. Tarayıcı onu geri gönderip 'değişti mi?' diye sorar; değişmediyse sunucu gövdesiz bir 304 döner.Sözlükte gör →, dosyanın sürümünü gösteren kısa bir etikettir. Tarayıcı bunu geri gönderip “değişti mi?” diye sorar; değişmediyse sunucu gövdesiz bir 304 döner.
JavaScript ve CSS için daha iyisi var: dosyanın adına içerik özetiDosyanın içeriğinden hesaplanan kısa bir değer, dosya adına eklenir (app.3f9a.js). İçerik değişince ad da değişir.Sözlükte gör → koymak (app.3f9a.js). İçerik değişince ad da değişir; bu yüzden dosya bir yıl önbellekte kalabilir.
Kafam karıştı, daha basit anlat
HTML’i her seferinde ETag ile sor. Adında içerik özeti olan dosyaları uzun süre sakla.
ETag ile yapılan bir istekte dosya değişmemişse sunucu ne döner?
Dosya adına içerik özeti koymak (app.3f9a.js) neden uzun önbelleği güvenli yapar?
Kendin gör
Dört ziyaret, arada bir yayın
Tohum 621042- Saat 0
- Saat 2
- Saat 4 (yayından sonra)
- Saat 30
Sunucuda saat 3'ten itibaren sürüm 2 var · toplam indirilen: 0 KB
Şu an ne oldu?
Önbellek yok
Ziyaretler saat 0, 2, 4, 30'da; saat 3'te yeni sürüm yayına alınıyor.
Görevler0/3
Yayından sonra müşteri hâlâ eski sürümü görsünaçık
İpucu
Tarayıcı sunucuya hiç sormasın.
Yeni HTML eski JavaScript ile çalışsınaçık
İpucu
HTML’i sor, ama JS adını değiştirme.
Her ziyaret güncel olsun, toplam indirme önbelleksizin yarısı kadar kalsınaçık
İpucu
Dosyanın adı içeriğini söylesin.
Olay günlüğü (0)
Henüz olay yok. Oynat veya adımla.
- Varsayılanla oynat. Her ziyaret güncel, ama her seferinde 208 KB indirildi.
- “Her şey 24 saat önbellekte” seç. Saat 4’teki ziyaret hiç istek göndermedi ve eski sürümü gösterdi.
- “HTML ETag ile, app.js 24 saat” seç. Saat 4’te yeni HTML eski app.js ile çalıştı.
- “JS adında içerik özeti” seç. Her ziyaret güncel, toplam indirme yarıya indi.
HTML her seferinde soruluyor ama app.js aynı adla 24 saat önbellekte. Yayından sonra ne olabilir?
Önbellek hiç kullanılmazsa ne olur?
Tuzaklar
no-cache ile no-store’u karıştırmak. no-cache “sakla ama her seferinde sor” demektir. Hiç saklanmaması gereken şey için no-store gerekir.
Hassas veriyi önbellekte bırakmak. Hesap bakiyesi ya da hareket listesi ortak bir bilgisayarda kalmamalı. Bu cevaplara no-store koy.
Önbelleği temizlemeyi çözüm sanmak. “Ctrl+F5 yapın” demek yalnızca o müşteriyi düzeltir. Kalıcı çözüm, başlıkları ve dosya adlarını doğru kurmaktır.
Kafam karıştı, daha basit anlat
no-cache sorarak saklar, no-store hiç saklamaz. Hassas veriye no-store koy.
Hesap bakiyesini döndüren API cevabı için hangi başlık uygundur?
Derinleş · İnternet şubesi: dosya adı, başlık ve hassas veri 4 dosya · ~79 satır · ilk okumada atlayabilirsin
Kendini sına
Cache-Control: no-cache, dosyanın hiç saklanmayacağı anlamına gelir.
Müşteriye 'Ctrl+F5 yapın' demek neden kalıcı bir çözüm değildir?
Aklında kalacak üç şey
- 1 Cache-Control bir dosyanın ne kadar süre sunucuya sorulmadan kullanılacağını söyler. HTML uzun süre önbellekte kalırsa, yayından sonra müşteri eski sürümü görür.
- 2 ETag ile tarayıcı 'bu dosya değişti mi?' diye sorar; değişmediyse sunucu gövdesiz bir 304 döner. Doğruluk korunur, indirilen veri küçülür.
- 3 Adında içerik özeti olan dosya (app.3f9a.js) değişince adı da değişir. Böylece bir yıl önbellekte kalabilir ve yeni sürüm yine anında gelir.
4 kart sonraki derste seni bekliyor
Bu dersin üstüne kurulanlar
Bunlar bu dersi temel alıyor; hazır olduğunda devam edebilirsin.
- Frontend & EntegrasyonÇevrimdışı Uygulama — Metroda Bağlantı Kopunca Ne Gösterilir?Metroda bağlantı koptu. Uygulama açıldı ve bakiye göründü. Peki o bakiye ne zamanki?Derse git
- System Design & Dağıtık SistemlerCDN ve Kenar Önbellek — Kampanya Sayfası Hızlansın, Hesap Sayfası KarışmasınBora 'Hesabım' sayfasını açtı ve başka birinin bakiyesini gördü. Kod doğruydu, veritabanı doğruydu. Sayfa nereden geldi?Derse git