Transições de visualização de SPA mais rápidas com o armazenamento em cache de estado

Ative a navegação instantânea entre visualizações em um aplicativo de página única (SPA) armazenando em cache o estado renderizado de visualizações inativas em vez de destruí-las.

Visão geral

Tradicionalmente, quando um usuário navega entre guias ou visualizações em um SPA, os desenvolvedores destroem a visualização antiga ou a ocultam usando display: none. As duas abordagens exigem que o navegador recrie ou recalcule o layout completo e pinte quando o usuário retornar a essa visualização.

Ao usar content-visibility: hidden em visualizações inativas, o navegador remove o conteúdo do elemento do fluxo de layout e para de renderizá-lo, mas mantém o estado de renderização armazenado em cache na memória. Quando o usuário volta, a visualização é restaurada quase instantaneamente.

A compensação entre CPU e RAM

Embora essa abordagem ofereça grandes benefícios de desempenho, ela apresenta uma desvantagem específica que você precisa gerenciar com cuidado:

• Economia de CPU: enorme. O navegador ignora completamente as passagens de layout e pintura para visualizações ocultas.
• Custo de RAM: alto. O navegador mantém todos os nós do DOM, listeners de eventos e o estado da visualização oculta na memória.

Quando essa compensação se torna perigosa

• RECOMENDAMOS usar essa estratégia para aplicativos simples com um número pequeno e previsível de visualizações (por exemplo, uma interface com 3 a 5 guias).
• NÃO armazene em cache incondicionalmente todas as visualizações em aplicativos altamente dinâmicos que geram dezenas de relatórios exclusivos ou usam rotas dinâmicas infinitas. Isso pode causar um aumento significativo no uso de memória e, em dispositivos mais simples, pode até travar o navegador.
• OBRIGATÓRIO: se o aplicativo for altamente dinâmico, você PRECISA implementar uma estratégia de remoção (como um cache de uso mais recente) para destruir as visualizações antigas quando um limite de memória for atingido.

Implementação

1. Configurar contêineres de visualização

Defina content-visibility: hidden em visualizações que não estão ativas no momento.

.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. Gerenciar o modo Foco

Ao trocar de visualização, gerencie o foco do teclado corretamente para preservar a acessibilidade.

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

Estratégias de fallback

A propriedade content-visibility é degradada de forma otimizada. Em navegadores que não oferecem suporte a ele:

• A propriedade é ignorada.
• Para evitar que os navegadores de fallback renderizem todas as visualizações simultaneamente, forneça um fallback para display: none no CSS:

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