Web Programlama Eğitimi: bfcache Engellerini Ölçüp Kaldırmak

Web programlama eğitimi ile bfcache isabetini RUM verisinde ölçmek

bfcache, tarayıcının bir geçmiş girdisini DOM, JavaScript heap'i ve render durumu ile birlikte dondurup geri yüklemesidir. Bu nedenle geri dönüşte yeni bir HTML indirme, bundle parse etme veya hydration çalıştırma maliyeti oluşmaz. Ölçümü yalnızca Navigation Timing'deki type: back_forward değeriyle sınırlamayın: Bu değer geçmiş navigasyonunu söyler, sayfanın gerçekten bfcache'den dönüp dönmediğini ise pageshow.persisted söyler. Aşağıdaki kodu uygulamanın en erken çalışan entry dosyasına ekleyip analitik uç noktanıza gönderin.

function reportBfcache(event) {
  const navigation = performance.getEntriesByType('navigation')[0];
  const payload = {
    path: location.pathname,
    restoredFromBfcache: event.persisted,
    navigationType: navigation?.type,
    domContentLoadedMs: Math.round(navigation?.domContentLoadedEventEnd ?? 0),
    timestamp: Date.now()
  };

  navigator.sendBeacon('/rum/navigation', JSON.stringify(payload));
}

addEventListener('pageshow', reportBfcache);

Raporu rota, tarayıcı ailesi ve oturum açılmış durum gibi boyutlarda gruplayın. Örneğin son 7 günde navigationType = back_forward olan 10.000 olayın 7.800'ünde restoredFromBfcache = true ise isabet oranı yüzde 78'dir. Değişiklikten önce ve sonra aynı rota dağılımını karşılaştırın; sadece ortalama yükleme süresini karşılaştırmak yanıltıcıdır, çünkü geri navigasyon trafiğinin oranı ürün akışına göre değişir. Özellikle ödeme, arama sonucu ve ürün detay rotaları genellikle geri tuşu ile sık ziyaret edilir.

DevTools ile bfcache engel nedenini kök nedene indirmek

Chromium tabanlı tarayıcılarda DevTools Application panelindeki Back-forward cache denetimini kullanın: hedef sayfayı açın, başka bir sayfaya gidin, geri gelin ve rapordaki Not restored reasons girdilerini inceleyin. Bu rapor, genel bir 'cache çalışmadı' mesajı yerine örneğin unload handler, açık kaynak, iframe veya tarayıcıya özgü bir engel sınıfı verir. Aynı senaryoyu hedef tarayıcılarda ayrıca test edin; bfcache uygunluk kuralları motorlar ve sürümler arasında birebir aynı değildir.

En sık gereksiz engel, telemetri veya cleanup amacıyla eklenmiş kalıcı unload dinleyicisidir. unload olayı bazı motorlarda bfcache'i doğrudan engeller, ayrıca mobil işletim sisteminin işlemi sonlandırdığı durumlarda zaten güvenilir bir teslim garantisi vermez. Telemetri için visibilitychange ile sendBeacon kullanın; oturumdaki değişmemiş form verisi için ise beforeunload dinleyicisini sadece gerçekten gerekli olduğu süre boyunca takın.

let formIsDirty = false;

function warnBeforeExit(event) {
  event.preventDefault();
  event.returnValue = '';
}

export function setFormDirty(dirty) {
  if (dirty === formIsDirty) return;
  formIsDirty = dirty;

  if (dirty) {
    addEventListener('beforeunload', warnBeforeExit);
  } else {
    removeEventListener('beforeunload', warnBeforeExit);
  }
}

addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/rum/visibility', JSON.stringify({ path: location.pathname }));
  }
});

Buradaki incelik şudur: form ilk açıldığında dinleyiciyi eklemeyin. Kullanıcı alanı değiştirince ekleyin, başarılı kaydetme sonrası kaldırın. Özellikle Firefox'ta beforeunload dinleyicisinin varlığı bfcache uygunluğunu etkileyebilir. Bu yüzden koşullu bağlama, yalnızca uyarı diyaloğunu değil, geri gezinme performansını da etkileyen ölçülebilir bir tasarım tercihidir.

ReactJS eğitimi, Angular eğitimi ve VueJS eğitimi için yaşam döngüsü tuzakları

Bir frontend framework karşılaştırması yapılırken component unmount ile sayfa yaşam döngüsünü aynı şey sanmak yaygın hatadır. bfcache'e giren dokümanda React component'i unmount olmaz, Angular bileşeni ngOnDestroy çağrısı almaz, Vue tarafında da route component'i yok edilmez; belge dondurulur. Bu nedenle geri dönüşte yeniden bağlanması gereken zamanlayıcı, abonelik veya kısa ömürlü kimlik bilgisi kontrolünü yalnızca component cleanup'ına bırakmayın.

ReactJS eğitimi içinde uygulanabilir kalıp, sayfa dondurulduğunda uygulama seviyesindeki akışı durdurmak ve geri döndüğünde state'i doğrulamaktır. Aşağıdaki hook, bfcache dönüşünde stale kullanıcı verisini körlemesine göstermemek için session endpoint'ini yeniden doğrular. İstek, önceki navigasyondan kalan sonucu yeni state'e yazmamak için AbortController ile yönetilir.

import { useEffect } from 'react';

export function useBfcacheSessionRefresh(refreshSession) {
  useEffect(() => {
    let controller;

    async function onPageShow(event) {
      if (!event.persisted) return;
      controller?.abort();
      controller = new AbortController();
      await refreshSession({ signal: controller.signal });
    }

    addEventListener('pageshow', onPageShow);
    return () => {
      controller?.abort();
      removeEventListener('pageshow', onPageShow);
    };
  }, [refreshSession]);
}

Angular eğitimi projelerinde aynı dinleyiciyi singleton bir servis içinde fromEvent(window, 'pageshow') ile kurup event.persisted filtresinden sonra store refresh dispatch edebilirsiniz. Eski AngularJS eğitimi materyallerindeki $scope.$destroy yaklaşımı burada yeterli değildir, çünkü bfcache dönüşünde scope yok edilmemiştir. VueJS eğitimi örneklerinde onActivated de yalnızca Vue KeepAlive için anlamlıdır; tarayıcı bfcache dönüşünü yakalamak için yine global pageshow gerekir. React Native eğitimi bağlamında ise bu olay webview veya tarayıcı geçmişi semantiğiyle birebir eşdeğer değildir; native uygulamada platformun app-state olaylarını ayrı tasarlamak gerekir.

JavaScript eğitimi pratiği: açık bağlantı ve timer kaynaklarını denetlemek

Uzun ömürlü kaynaklarda amaç, sayfadan çıkarken her şeyi koşulsuz kapatmak değildir; önce DevTools'un verdiği gerçek engel nedenini doğrulamaktır. Örneğin sayfa WebSocket, WebRTC veya IndexedDB kullanıyorsa hedef tarayıcıda bfcache uygunluğunu manuel olarak test edin. Bir bağlantıyı pagehide anında kapatıp pageshow anında yeniden açmak bazı uygulamalarda doğru olabilir, ancak bağlantı kesilince kaybolan mesajların sequence numarası ile telafi edilmesi gerekir.

Aşağıdaki desen, sunucunun gönderdiği olaylarda tekrar ve boşluk tespiti yapar. Sayfa bfcache'den dönünce bağlantıyı açar, son görülen sıra numarasından itibaren eksik olayları REST üzerinden ister. Bu, 'geri gelince socket aç' önerisinin neden tek başına yetersiz olduğunu gösterir: dondurulma sırasında kaçırılan olaylar state tutarsızlığına dönüşebilir.

let lastSequence = 0;
let socket;

async function reconcile() {
  const response = await fetch(`/api/events?after=${lastSequence}`);
  const events = await response.json();
  for (const event of events) applyEvent(event);
}

function applyEvent(event) {
  if (event.sequence <= lastSequence) return;
  if (event.sequence !== lastSequence + 1) {
    console.warn('Event gap detected', { lastSequence, next: event.sequence });
  }
  lastSequence = event.sequence;
  // Uygulama store'una idempotent güncelleme yapın.
}

addEventListener('pageshow', async (event) => {
  if (event.persisted) await reconcile();
  if (!socket || socket.readyState > WebSocket.OPEN) {
    socket = new WebSocket('wss://example.test/events');
    socket.onmessage = (message) => applyEvent(JSON.parse(message.data));
  }
});

JavaScript eğitimi kapsamında ayrıca setInterval kullanan polling kodunu denetleyin. Dondurulmuş sayfada timer davranışına iş mantığı bağlamak yerine, pageshow.persisted sonrası tek bir idempotent senkronizasyon çağrısı yapın. Böylece geri dönüşte eski cache verisini gösterme süresi, polling periyoduna değil doğrudan yeniden doğrulama isteğinin sonucuna bağlı olur.

Önce-sonra doğrulaması için Playwright ile geri gezinme testi

Manuel DevTools kontrolünü CI'a taşımak için Playwright ile kritik akışlarda pageshow.persisted bayrağını doğrulayın. Testte hedef rota A'yı açın, B'ye geçin, goBack() çağırın ve A'nın yüklediği işaretçiyi okuyun. Bu test, örneğin bir üçüncü taraf etiketi yeniden unload eklediğinde regresyonu yakalar. CI tarayıcınızın bfcache davranışı ile üretimde desteklediğiniz tarayıcıların davranışını ayrı raporlayın.

import { test, expect } from '@playwright/test';

test('product page restores from bfcache', async ({ page }) => {
  await page.addInitScript(() => {
    addEventListener('pageshow', (event) => {
      window.__restoredFromBfcache = event.persisted;
    });
  });

  await page.goto('/products/42');
  await page.getByRole('link', { name: 'Seller profile' }).click();
  await page.goBack();

  await expect.poll(() => page.evaluate(() => window.__restoredFromBfcache))
    .toBe(true);
});

Değişiklik öncesinde RUM'da geri navigasyonların bfcache isabet oranını ve ilgili rotadaki istemci tarafı yeniden doğrulama süresini kaydedin. Örneğin koşulsuz beforeunload kaldırıldıktan sonra oran yüzde 41'den yüzde 83'e çıkıyorsa, aynı tarih aralığında tarayıcı dağılımı ve rota trafiğinin benzer olduğunu kontrol edin. Ardından DevTools Performance panelinde bir geri dönüş kaydı alın: başarılı bfcache dönüşünde yeni doküman parse ve bundle evaluation işlemlerinin görünmemesi, RUM'daki persisted sinyalini mekanizma düzeyinde doğrular.

Sık Sorulan Sorular

Web programlama eğitimi kapsamında bfcache çalışıp çalışmadığını nasıl ölçerim?

Her sayfada pageshow olayını dinleyin ve event.persisted değerini RUM'a gönderin. performance.getEntriesByType('navigation')[0].type değerini de kaydedin; back_forward geçmiş gezinmesini, persisted ise gerçek bfcache geri yüklemesini ayırır.

ReactJS eğitimi projesinde useEffect cleanup bfcache için yeterli mi?

Hayır. bfcache'e giren sayfa component unmount yaşamaz; JavaScript heap'i dondurulur. Global pageshow dinleyicisinde event.persisted kontrolü yapın ve oturum, fiyat veya envanter gibi değişebilir verileri AbortController ile iptal edilebilir bir istekle yeniden doğrulayın.

Angular eğitimi veya AngularJS eğitimi uygulamasında geri dönüşte store neden eski kalır?

Geri dönüş bfcache ile olduysa ngOnDestroy ve AngularJS $destroy çağrılmayabilir, çünkü sayfa yok edilmemiştir. Angular'da singleton serviste fromEvent(window, 'pageshow') kullanın; AngularJS'te ise root seviyesinde pageshow dinleyip event.persisted olduğunda store'u API'den reconcile edin.

VueJS eğitimi içeriğinde KeepAlive activated hook'u bfcache dönüşünü yakalar mı?

Hayır. activated ve deactivated, Vue'nun kendi component cache mekanizması içindir. Tarayıcı bfcache dönüşünü window pageshow olayı ve event.persisted alanı ile yakalayın; ardından store verisini idempotent bir refresh çağrısıyla doğrulayın.

Frontend framework karşılaştırması yaparken React Native eğitimi neden bfcache ile aynı başlıkta değerlendirilmemeli?

bfcache tarayıcı geçmiş girdisi mekanizmasıdır. React Native uygulamalarında lifecycle yönetimi AppState ve platform olaylarıyla yapılır. Ortak olan konu stale state uzlaştırmasıdır, ancak pageshow.persisted ve browser back-forward cache sinyalleri native ortamda varsayılmamalıdır.