Durum Önbelleğe Alma ile Daha Hızlı SPA Görünüm Geçişleri

Web özellikleri: content-visibility

Tek sayfalık uygulamalarda (SPA) görünümler arasında anında gezinmeyi etkinleştirmek için etkin olmayan görünümleri yok etmek yerine oluşturulan durumlarını önbelleğe alın.

Genel Bakış

Geleneksel olarak, bir kullanıcı SPA'da sekmeler veya görünümler arasında gezindiğinde geliştiriciler eski görünümü yok eder veya display: none kullanarak gizler. Her iki yaklaşımda da kullanıcı bu görünüme döndüğünde tarayıcının tam düzeni ve boyayı yeniden oluşturması veya yeniden hesaplaması gerekir.

Tarayıcı, etkin olmayan görünümlerde content-visibility: hidden kullanarak öğenin içeriğini düzen akışından kaldırır ve boyamayı durdurur ancak önbelleğe alınmış oluşturma durumunu bellekte saklar. Kullanıcı geri döndüğünde görünüm neredeyse anında geri yüklenir.

CPU ve RAM Arasındaki Denge

Bu yaklaşım, performans açısından büyük avantajlar sunsa da dikkatli bir şekilde yönetmeniz gereken belirli bir dengeyi de beraberinde getirir:

  • CPU tasarrufu: Çok büyük. Tarayıcı, gizli görünümler için düzen ve boyama aşamalarını tamamen atlar.
  • RAM maliyeti: Yüksek. Tarayıcı, gizli görünüm için tüm DOM düğümlerini, etkinlik işleyicileri ve durumu bellekte tutar.

Bu ödün ne zaman tehlikeli hale gelir?

  • Küçük ve öngörülebilir sayıda görünüme sahip basit uygulamalar (ör. 3 ila 5 sekmeli bir arayüz) için bu stratejiyi KULLANIN.
  • Düzinelerce benzersiz rapor oluşturan veya sonsuz dinamik rotalar kullanan son derece dinamik uygulamalarda her görünümü koşulsuz olarak önbelleğe almayın. Bunu yapmak, zaman içinde ciddi bellek şişmesine neden olur ve düşük özellikli cihazlarda tarayıcının kilitlenmesine yol açabilir.
  • ZORUNLU: Uygulamanız son derece dinamikse bellek eşiğine ulaşıldığında eski görünümleri yok etmek için bir çıkarma stratejisi (en son kullanılan önbellek gibi) uygulamanız ZORUNLUDUR.

Uygulama

1. Kapsayıcıları Görüntüleme Yapılandırması

Şu anda etkin olmayan görünümlerde content-visibility: hidden değerini ayarlayın.

.spa-view.inactive {
  /* MANDATORY: Use hidden to cache the rendering state of inactive views */
  content-visibility: hidden;
  
  /* Optional: Prevent hidden views from taking up physical space in layout flow */
  position: absolute;
}

2. Odak'ı yönetme

Görünümleri değiştirirken erişilebilirliği korumak için klavye odağını doğru şekilde yönettiğinizden emin olun.

function switchToView(viewId) {
  // Hide all views
  document.querySelectorAll('.spa-view').forEach(view => {
    view.classList.add('inactive');
    view.setAttribute('aria-hidden', 'true');
  });
  
  // Show the target view
  const activeView = document.getElementById(viewId);
  activeView.classList.remove('inactive');
  activeView.setAttribute('aria-hidden', 'false');
  
  // MANDATORY: Move focus to the new view to ensure a logical tab-order
  activeView.focus();
}

Yedek stratejiler

content-visibility özelliği düzgün bir şekilde düşürülür. Bu özelliği desteklemeyen tarayıcılarda:

  • Özellik yok sayılır.
  • Yedek tarayıcıların tüm görünümleri aynı anda oluşturmasını önlemek için CSS'nizde display: none için bir yedek sağlamanız gerekir:
@supports not (content-visibility: hidden) {
  .spa-view.inactive {
    display: none;
  }
}