Transizioni di visualizzazione SPA più rapide tramite la memorizzazione nella cache dello stato

Attiva la navigazione istantanea tra le visualizzazioni in un'applicazione a pagina singola (SPA) memorizzando nella cache lo stato di rendering delle visualizzazioni inattive anziché eliminarle.

Panoramica

In genere, quando un utente si sposta tra le schede o le visualizzazioni in un'SPA, gli sviluppatori eliminano la visualizzazione precedente o la nascondono utilizzando display: none. Entrambi gli approcci richiedono al browser di ricreare o ricalcolare il layout completo e di eseguire il paint quando l'utente torna a quella visualizzazione.

Utilizzando content-visibility: hidden sulle visualizzazioni non attive, il browser rimuove i contenuti dell'elemento dal flusso di layout e interrompe la visualizzazione, ma conserva lo stato di rendering memorizzato nella cache. Quando l'utente torna alla visualizzazione precedente, questa viene ripristinata quasi istantaneamente.

Il compromesso tra CPU e RAM

Sebbene questo approccio offra enormi vantaggi in termini di prestazioni, introduce un compromesso specifico che devi gestire con attenzione:

• Risparmio di CPU: enorme. Il browser salta completamente i passaggi di layout e disegno per le visualizzazioni nascoste.
• Costo della RAM: elevato. Il browser mantiene in memoria tutti i nodi DOM, i listener di eventi e lo stato della visualizzazione nascosta.

Quando questo compromesso diventa pericoloso

• SÌ: utilizza questa strategia per applicazioni semplici con un numero ridotto e prevedibile di visualizzazioni (ad esempio, un'interfaccia con 3-5 schede).
• NON memorizzare nella cache in modo incondizionato ogni visualizzazione in applicazioni altamente dinamiche che generano decine di report unici o utilizzano route dinamiche infinite. In questo modo, si verificherà un grave aumento della memoria e il browser potrebbe arrestarsi in modo anomalo sui dispositivi di fascia bassa.
• OBBLIGATORIO: se la tua applicazione è altamente dinamica, DEVI implementare una strategia di rimozione (come una cache LRU, Least Recently Used) per eliminare le visualizzazioni precedenti quando viene raggiunta una soglia di memoria.

Implementazione

1. Configura i container di visualizzazione

Imposta content-visibility: hidden sulle visualizzazioni che non sono attualmente attive.

.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. Gestisci la modalità Non disturbare

Quando cambi visualizzazione, assicurati di gestire correttamente la selezione della tastiera per preservare l'accessibilità.

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 di riserva

La proprietà content-visibility si degrada in modo controllato. Nei browser che non lo supportano:

• La proprietà viene ignorata.
• Per impedire ai browser di riserva di eseguire il rendering di tutte le visualizzazioni contemporaneamente, devi fornire un'opzione di riserva per display: none nel CSS:

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