Szybsze przejścia widoku SPA dzięki buforowaniu stanu

Włącz natychmiastową nawigację między widokami w aplikacji jednostronicowej (SPA) przez zapisywanie w pamięci podręcznej wyrenderowanego stanu nieaktywnych widoków zamiast ich niszczenia.

Przegląd

Tradycyjnie, gdy użytkownik przechodzi między kartami lub widokami w aplikacji SPA, deweloperzy niszczą stary widok lub ukrywają go za pomocą display: none. Oba podejścia wymagają od przeglądarki ponownego utworzenia lub przeliczenia pełnego układu i renderowania, gdy użytkownik wróci do tego widoku.

Dzięki zastosowaniu content-visibility: hidden w nieaktywnych widokach przeglądarka usuwa zawartość elementu z przepływu układu i przestaje go renderować, ale zachowuje w pamięci jego stan renderowania z pamięci podręcznej. Gdy użytkownik wróci do poprzedniego widoku, zostanie on przywrócony niemal natychmiast.

Kompromis między procesorem a pamięcią RAM

Chociaż takie podejście zapewnia ogromne korzyści pod względem wydajności, wiąże się z pewnym kompromisem, którym musisz ostrożnie zarządzać:

• Oszczędność procesora: ogromna. Przeglądarka całkowicie pomija etapy układu i renderowania w przypadku ukrytych widoków.
• Koszt pamięci RAM: wysoki. Przeglądarka przechowuje w pamięci wszystkie węzły DOM, detektory zdarzeń i stan ukrytego widoku.

Kiedy ten kompromis staje się niebezpieczny

• ZALECAMY stosowanie tej strategii w przypadku prostych aplikacji z niewielką, przewidywalną liczbą widoków (np. interfejs z 3–5 kartami).
• NIE przechowuj bezwarunkowo w pamięci podręcznej każdego widoku w wysoce dynamicznych aplikacjach, które generują dziesiątki unikalnych raportów lub używają nieskończonych tras dynamicznych. Spowoduje to ostatecznie poważne przepełnienie pamięci i może doprowadzić do awarii przeglądarki na urządzeniach o niskiej wydajności.
• OBOWIĄZKOWO: jeśli Twoja aplikacja jest bardzo dynamiczna, MUSISZ wdrożyć strategię wykluczania (np. pamięć podręczną LRU), aby niszczyć stare widoki po osiągnięciu progu pamięci.

Implementacja

1. Konfigurowanie kontenerów widoku

Ustaw content-visibility: hidden w widokach, które nie są obecnie aktywne.

.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. Zarządzanie skupieniem uwagi

Podczas przełączania widoków pamiętaj o prawidłowym zarządzaniu fokusem klawiatury, aby zachować ułatwienia dostępu.

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();
}

Strategie zastępcze

Właściwość content-visibility jest wycofywana stopniowo. W przeglądarkach, które nie obsługują tej funkcji:

• Właściwość jest ignorowana.
• Aby zapobiec renderowaniu wszystkich widoków jednocześnie przez przeglądarki zastępcze, w kodzie CSS należy podać zastępczy element display: none:

@supports not (content-visibility: hidden) {
  .spa-view.inactive {
    display: none;
  }
}