Transitions de vue SPA plus rapides grâce à la mise en cache de l'état

Activez la navigation instantanée entre les vues dans une application monopage (SPA) en mettant en cache l'état affiché des vues inactives au lieu de les détruire.

Présentation

Traditionnellement, lorsqu'un utilisateur navigue entre les onglets ou les vues d'une SPA, les développeurs détruisent l'ancienne vue ou la masquent à l'aide de display: none. Dans les deux cas, le navigateur doit recréer ou recalculer l'intégralité de la mise en page et de l'affichage lorsque l'utilisateur revient à cette vue.

En utilisant content-visibility: hidden sur les vues inactives, le navigateur supprime le contenu de l'élément du flux de mise en page et arrête de l'afficher, mais conserve son état de rendu mis en cache en mémoire. Lorsque l'utilisateur revient à l'application, la vue est restaurée presque instantanément.

Le compromis entre CPU et RAM

Bien que cette approche offre d'énormes avantages en termes de performances, elle introduit un compromis spécifique que vous devez gérer avec soin :

• Économies de CPU : énormes. Le navigateur ignore complètement les passes de mise en page et de peinture pour les vues masquées.
• Coût de la RAM : élevé. Le navigateur conserve en mémoire tous les nœuds DOM, les écouteurs d'événements et l'état de la vue masquée.

Quand ce compromis devient dangereux

• À FAIRE : Utilisez cette stratégie pour les applications simples comportant un nombre de vues faible et prévisible (par exemple, une interface à trois ou cinq onglets).
• NE METTEZ PAS en cache de manière inconditionnelle chaque vue dans les applications hautement dynamiques qui génèrent des dizaines de rapports uniques ou utilisent des routes dynamiques infinies. Cela finira par entraîner une augmentation importante de la mémoire et peut faire planter le navigateur sur les appareils bas de gamme.
• OBLIGATOIRE : Si votre application est très dynamique, vous DEVEZ mettre en œuvre une stratégie d'éviction (comme un cache LRU) pour détruire les anciennes vues lorsqu'un seuil de mémoire est atteint.

Implémentation

1. Configurer des conteneurs de vues

Définissez content-visibility: hidden sur les vues qui ne sont pas actives actuellement.

.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. Gérer le mode Concentration

Lorsque vous changez de vue, assurez-vous de gérer correctement le focus clavier pour préserver 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();
}

Stratégies de remplacement

La propriété content-visibility se dégrade de manière fluide. Dans les navigateurs qui ne sont pas compatibles :

• La propriété est ignorée.
• Pour éviter que les navigateurs de remplacement n'affichent toutes les vues simultanément, vous devez fournir un remplacement pour display: none dans votre CSS :

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