Schnellere SPA-Ansichtsübergänge durch State Caching

Ermöglicht die sofortige Navigation zwischen Ansichten in einer Single-Page-Anwendung (SPA), indem der gerenderte Status inaktiver Ansichten im Cache gespeichert wird, anstatt sie zu löschen.

Übersicht

Wenn ein Nutzer in einer SPA zwischen Tabs oder Ansichten wechselt, wird die alte Ansicht normalerweise entweder gelöscht oder mit display: none ausgeblendet. Bei beiden Ansätzen muss der Browser das gesamte Layout und die Darstellung neu erstellen oder neu berechnen, wenn der Nutzer zu dieser Ansicht zurückkehrt.

Wenn Sie content-visibility: hidden für inaktive Ansichten verwenden, entfernt der Browser den Inhalt des Elements aus dem Layoutfluss und rendert ihn nicht mehr. Der im Cache gespeicherte Rendering-Status wird jedoch im Arbeitsspeicher beibehalten. Wenn der Nutzer zurückwechselt, wird die Ansicht fast sofort wiederhergestellt.

CPU- und RAM-Nutzung im Vergleich

Dieser Ansatz bietet zwar enorme Leistungsvorteile, bringt aber auch einen bestimmten Nachteil mit sich, den Sie sorgfältig berücksichtigen müssen:

• CPU-Einsparungen: Enorm. Der Browser überspringt die Layout- und Paint-Durchgänge für ausgeblendete Ansichten vollständig.
• RAM-Kosten: Hoch. Der Browser speichert alle DOM-Knoten, Event-Listener und den Status für die ausgeblendete Ansicht im Arbeitsspeicher.

Wann dieser Kompromiss gefährlich wird

• EMPFOHLEN: Verwenden Sie diese Strategie für einfache Anwendungen mit einer kleinen, vorhersehbaren Anzahl von Ansichten (z.B. eine Benutzeroberfläche mit 3 bis 5 Tabs).
• NICHT jede Ansicht in hochdynamischen Anwendungen bedingungslos im Cache speichern, die Dutzende von eindeutigen Berichten generieren oder unendlich viele dynamische Routen verwenden. Dies führt letztendlich zu einer starken Speicherüberlastung und kann auf Low-End-Geräten zum Absturz des Browsers führen.
• OBLIGATORISCH: Wenn Ihre Anwendung sehr dynamisch ist, MÜSSEN Sie eine Entfernungsstrategie (z. B. einen LRU-Cache) implementieren, um alte Ansichten zu löschen, wenn ein Speicherschwellenwert erreicht wird.

Implementierung

1. Ansichtscontainer konfigurieren

Legen Sie content-visibility: hidden für Ansichten fest, die derzeit nicht aktiv sind.

.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. Fokus verwalten

Achten Sie beim Wechseln der Ansichten darauf, den Tastaturfokus richtig zu verwalten, um die Barrierefreiheit zu gewährleisten.

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

Fallback-Strategien

Das Attribut content-visibility wird ordnungsgemäß herabgestuft. In Browsern, die es nicht unterstützen:

• Das Attribut wird ignoriert.
• Damit Fallback-Browser nicht alle Ansichten gleichzeitig rendern, sollten Sie in Ihrem CSS ein Fallback auf display: none angeben:

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