JavaScript Academy · Ders

Önbelleğe Alma Stratejileri

Önce önbellek ve önce ağ desenlerini uygulayın.

Önbelleğe Alma Stratejileri, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Stratejiler Neden Önemli?

Farklı kaynaklar farklı işlemler gerektirir. Bir logo sonsuza kadar önbellekten sunulabilir; bir API akışının güncel olması gerekir. Bir önbelleğe alma stratejisi, önce önbelleği mi yoksa ağı mı deneyeceğinize ve bunları nasıl birleştireceğinize karar verir.

Önce Önbellek

Önce önbellek: Önbelleği kontrol edin; bulunursa onu döndürün, yoksa ağdan alın. Yazı tipleri, CSS ve görseller gibi sabit ve nadiren değişen kaynaklar için idealdir.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

Geri Dönüşlü Önce Önbellek

Önbellekte eşleşme bulunamadığında kaynağı alıp sonucu aynı zamanda depolayabilirsiniz; böylece sonraki istek hızlı olur. Bu yöntem, kullanıcılar gezindikçe önbelleği tembel bir şekilde ısıtır.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const fresh = await fetch(request);
  const cache = await caches.open('runtime');
  cache.put(request, fresh.clone());
  return fresh;
}

Önce Ağ

Önce ağ: Önce ağı deneyin; başarılı olursa sonucu kullanıp önbelleğe alın, başarısız olursa (çevrimdışı durumda) önbelleğe geri dönün. Haberler veya gösterge panelleri gibi sık güncellenen içerikler için en uygunudur.

async function networkFirst(request) {
  try {
    const fresh = await fetch(request);
    const cache = await caches.open('runtime');
    cache.put(request, fresh.clone());
    return fresh;
  } catch (err) {
    return caches.match(request);
  }
}

Eskiyi Kullanıp Yeniden Doğrulama

Eskiyi kullanıp yeniden doğrulama: Hız kazanmak için önbelleğe alınmış kopyayı hemen döndürürken, önbelleği bir sonraki kullanım için güncellemek üzere arka planda güncel bir kopya alın. Bu, hız ile güncellik arasında harika bir dengedir.

async function staleWhileRevalidate(request) {
  const cache = await caches.open('runtime');
  const cached = await cache.match(request);
  const network = fetch(request).then(res => {
    cache.put(request, res.clone());
    return res;
  });
  return cached || network;
}

Yalnızca Ağ ve Yalnızca Önbellek

İki basit uç seçenek:

Yalnızca ağ: Her zaman alın, hiçbir zaman önbelleğe almayın (örneğin analiz işaretçileri).
Yalnızca önbellek: Yalnızca önceden önbelleğe alınmış varlıkları sunun, ağa hiçbir zaman başvurmayın (örneğin uygulama kabuğu).

// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);

İstek Türüne Göre Yönlendirme

Gerçek uygulamalar her istek için bir strateji seçer. Fetch işleyicisinde request.url veya request.destination değerini inceleyip isteği buna göre yönlendirin.

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(cacheFirst(event.request));
  }
});

Çevrim Dışı Alternatifleri Yönetme

Hem ağda hem de önbellekte sonuç bulunamadığında, bozuk bir yanıt döndürmek yerine kullanıcıya uygun bir çevrim dışı sayfa veya yer tutucu sunun.

async function withOfflineFallback(request) {
  return (await caches.match(request)) ||
         (await caches.match('/offline.html'));
}

Yalnızca Başarılı Yanıtları Önbelleğe Alma

Hataları önbelleğe almaktan kaçının. Depolamadan önce response.ok değerini (veya durum kodunu) kontrol ederek 404 ya da 500 yanıtlarının önbelleğinizi bozmasını önleyin.

const fresh = await fetch(request);
if (fresh.ok) {
  cache.put(request, fresh.clone());
}
return fresh;

Strateji Seçme

Stratejiyi içeriğe uygun seçin:

Statik varlıklar: önbellek öncelikli
Dinamik veriler: ağ öncelikli
Karışık içerik: eskiyi kullanıp yeniden doğrulama

Çoğu uygulama, istek yönlendirmesi aracılığıyla birkaç stratejiyi birleştirir.

Stratejilerin Özeti

Önbelleğe alma stratejileri, tek bir hizmet çalışanının tüm uygulamayı akıllıca sunmasını sağlar: statik varlıklar anında sunulur, dinamik veriler güncel tutulur ve uygun çevrim dışı alternatifler her istek için seçilir.

Kısa Kontrol

Önbelleğe alma stratejilerini ne kadar anladığınızı sınayın.

Özet

Önbelleğe alma stratejilerini öğrendiniz:

Statik varlıklar için önbellek öncelikli.
Güncel dinamik veriler için ağ öncelikli.
Hız ve güncellik için eskiyi kullanıp yeniden doğrulama.
request.url/destination aracılığıyla her isteği yönlendirme.
Yalnızca başarılı yanıtları önbelleğe alma ve çevrim dışı alternatifler sunma.

Sırada arka plan senkronizasyonu ve önbellek güncellemeleri var.

Sıkça Sorulan Sorular

“Önbelleğe Alma Stratejileri” dersi ücretsiz mi?

Evet — “Önbelleğe Alma Stratejileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Önbelleğe Alma Stratejileri” dersinde ne öğreneceğim?

Önce önbellek ve önce ağ desenlerini uygulayın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Önbelleğe Alma Stratejileri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön