Snellere SPA-weergaveovergangen via statuscaching

Zet directe navigatie tussen weergaven in een app met één pagina aan door de gerenderde status van inactieve weergaven te cachen in plaats van ze te vernietigen.

Overzicht

Als een gebruiker tussen tabbladen of weergaven in een SPA navigeert, vernietigen ontwikkelaars de oude weergave of verbergen ze deze met display: none. Bij beide benaderingen moet de browser de volledige indeling en weergave opnieuw maken of berekenen wanneer de gebruiker terugkeert naar die weergave.

Als je content-visibility: hidden gebruikt voor inactieve weergaven, verwijdert de browser de content van het element uit de vormgevingsstroom en wordt het niet meer getekend, maar wordt de weergavestatus in het cachegeheugen bewaard in het geheugen. Als de gebruiker terugschakelt, wordt de weergave bijna onmiddellijk hersteld.

De afweging tussen CPU en RAM

Deze aanpak biedt enorme prestatievoordelen, maar brengt ook een specifieke afweging met zich mee die u zorgvuldig moet beheren:

• CPU-besparingen: Enorm. De browser slaat de opmaak- en tekenfasen voor verborgen weergaven helemaal over.
• RAM-kosten: Hoog. De browser bewaart alle DOM-nodes, event-listeners en de status voor de verborgen weergave in het geheugen.

Wanneer deze afweging gevaarlijk wordt

• Gebruik deze strategie WEL voor eenvoudige apps met een klein, voorspelbaar aantal weergaven (bijvoorbeeld een interface met 3 tot 5 tabbladen).
• Sla NIET onvoorwaardelijk elke weergave op in het cachegeheugen in zeer dynamische apps die tientallen unieke rapporten genereren of oneindige dynamische routes gebruiken. Als je dit doet, leidt dit uiteindelijk tot ernstige geheugenoverbelasting en kan de browser crashen op apparaten met weinig geheugen.
• VERPLICHT: Als je app zeer dynamisch is, MOET je een verwijderingsstrategie implementeren (zoals een cache met de minst recent gebruikte items) om oude weergaven te verwijderen als een geheugendrempel wordt bereikt.

Implementatie

1. Weergavecontainers configureren

Stel content-visibility: hidden in voor weergaven die op dit moment niet actief zijn.

.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. Focus beheren

Als je van weergave wisselt, zorg je dat je de toetsenbordfocus op de juiste manier beheert om de toegankelijkheid te behouden.

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

Reservestrategieën

De property content-visibility wordt geleidelijk afgebouwd. In browsers die dit niet ondersteunen:

• De property wordt genegeerd.
• Als je wilt voorkomen dat fallback-browsers alle weergaven tegelijk renderen, moet je een fallback naar display: none opgeven in je CSS:

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