Publicado em 25 de maio de 2023. Última atualização: 2 de julho de 2026
O cache de avanço e retorno (bfcache) é uma otimização do navegador que permite voltar e avançar na navegação. Ele melhora significativamente a experiência de navegação, especialmente para usuários com redes ou dispositivos mais lentos.
Como desenvolvedores da Web, é fundamental entender como otimizar suas páginas para o bfcache para que os usuários possam aproveitar os benefícios.
Compatibilidade com navegadores
Todos os principais navegadores incluem um bfcache, incluindo o Chrome desde a versão 96, o Firefox e o Safari.
Noções básicas do bfcache
Com o cache de avanço e retorno (bfcache), em vez de destruir uma página quando o usuário sai dela, adiamos a destruição e pausamos a execução do JS. Se o usuário voltar em breve, vamos tornar a página visível novamente e retomar a execução do JavaScript. Isso resulta em uma navegação nas páginas quase instantânea para o usuário.
Quantas vezes você já acessou um site e clicou em um link para ir a outra página, mas percebeu que não era o que você queria e clicou no botão "Voltar"? Nesse momento, o bfcache pode fazer uma grande diferença na velocidade de carregamento da página anterior:
| Sem o bfcache ativado | Uma nova solicitação é iniciada para carregar a página anterior e, dependendo de como ela foi otimizada para visitas repetidas, o navegador pode precisar baixar, analisar e executar novamente alguns (ou todos) os recursos que acabou de baixar. |
| Com o bfcache ativado | O carregamento da página anterior é essencialmente instantâneo, porque a página inteira pode ser restaurada da memória, sem precisar acessar a rede. |
Confira este vídeo do bfcache em ação para entender a aceleração que ele pode trazer para as navegações:
No vídeo, o exemplo com bfcache é muito mais rápido do que o exemplo sem ele.
O bfcache não apenas acelera a navegação, mas também reduz o uso de dados, já que os recursos não precisam ser baixados novamente.
Os dados de uso do Chrome mostram que 1 em cada 10 navegações em computadores e 1 em cada 5 em dispositivos móveis são para voltar ou avançar. Com o bfcache ativado, os navegadores podem eliminar a transferência de dados e o tempo gasto no carregamento de bilhões de páginas da Web todos os dias.
Como o "cache" funciona
O "cache" usado pelo bfcache é diferente do cache HTTP, que tem um papel próprio na aceleração de navegações repetidas. O bfcache é um snapshot da página inteira na memória, incluindo o heap JavaScript, enquanto o cache HTTP contém apenas as respostas para solicitações feitas anteriormente. Como é muito raro que todas as solicitações necessárias para carregar uma página sejam atendidas pelo cache HTTP, as visitas repetidas usando restaurações do bfcache são sempre mais rápidas do que até mesmo as navegações sem bfcache mais bem otimizadas.
Congelar uma página para reativá-la depois envolve alguma complexidade em termos de como preservar melhor o código em andamento. Por exemplo, como você lida com chamadas setTimeout() em que o tempo limite é atingido enquanto a página está no bfcache?
A resposta é que os navegadores pausam todos os timers pendentes ou promessas não resolvidas para páginas no bfcache, incluindo quase todas as tarefas pendentes nas filas de tarefas do JavaScript, e retomam o processamento de tarefas se a página for restaurada do bfcache.
Em alguns casos, como para tempos limite e promessas, o risco é baixo, mas em outros casos pode levar a um comportamento confuso ou inesperado. Por exemplo, se o navegador pausar uma tarefa necessária como parte de uma transação do IndexedDB, isso poderá afetar outras guias abertas na mesma origem, porque vários guias podem acessar os mesmos bancos de dados do IndexedDB simultaneamente. Como resultado, os navegadores geralmente não tentam armazenar em cache páginas no meio de uma transação do IndexedDB ou ao usar APIs que podem afetar outras páginas.
Para mais detalhes sobre como o uso de várias APIs afeta a qualificação de uma página para bfcache, consulte Otimizar suas páginas para bfcache.
O bfcache e os iframes
Se uma página tiver iframes incorporados, eles não serão qualificados separadamente para o bfcache. Por exemplo, se você navegar para outro URL em um iframe, o conteúdo anterior não entrará no bfcache. Se você voltar, o navegador vai "voltar" no iframe em vez de no frame principal, mas a navegação de retorno no iframe não usará o bfcache.
No entanto, quando o frame principal é restaurado do bfcache, os iframes incorporados são restaurados como estavam quando a página entrou no bfcache.
O frame principal também pode ser impedido de usar o bfcache se um iframe incorporado usar APIs que bloqueiam isso. A política de permissões definida no frame principal ou o uso de atributos sandbox podem ser usados para evitar isso.
O bfcache e os aplicativos de página única (SPA)
Como o bfcache funciona com navegações gerenciadas pelo navegador, ele não funciona com "navegações leves" em um app de página única (SPA, na sigla em inglês). No entanto, o bfcache ainda pode ajudar ao voltar para um SPA em vez de fazer uma reinicialização completa do app desde o início.
APIs para observar o bfcache
Embora o bfcache seja uma otimização que os navegadores fazem automaticamente, ainda é importante que os desenvolvedores saibam quando isso está acontecendo para otimizar as páginas para ele e ajustar as métricas ou a medição de desempenho de acordo.
Os principais eventos usados para observar o bfcache são os eventos de transição de página pageshow e pagehide, que são compatíveis com a maioria dos navegadores.
Os eventos mais recentes do ciclo de vida da página (freeze e resume) também são enviados quando as páginas entram ou saem do bfcache, bem como em algumas outras situações, por exemplo, quando uma guia em segundo plano é congelada para minimizar o uso da CPU. Esses eventos são compatíveis apenas com navegadores baseados no Chromium.
Observar quando uma página é restaurada do bfcache
O evento pageshow é acionado logo depois do load quando a página é carregada pela primeira vez e todas as vezes que a página é restaurada do bfcache. O evento pageshow tem uma propriedade persisted, que é true se a página foi restaurada do bfcache e false caso contrário. É possível usar a propriedade persisted para diferenciar entre os carregamentos de página normais e as restaurações do bfcache. Exemplo:
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
console.log('This page was restored from the bfcache.');
} else {
console.log('This page was loaded normally.');
}
});
Em navegadores compatíveis com a API Page Lifecycle, o evento resume é acionado quando as páginas são restauradas do bfcache (imediatamente antes do evento pageshow) e quando um usuário revisita uma guia em segundo plano congelada. Se você quiser atualizar o estado de uma página depois que ela for congelada (incluindo páginas no bfcache), use o evento resume. No entanto, se quiser medir a taxa de acertos do bfcache do seu site, use o evento pageshow. Em alguns casos, talvez seja necessário usar os dois.
Para detalhes sobre as práticas recomendadas de medição do bfcache, consulte Como o bfcache afeta a análise e a medição de desempenho.
Observar quando uma página está entrando no bfcache
O evento pagehide é acionado quando uma página é descarregada ou quando o navegador tenta colocá-la no bfcache.
O evento pagehide também tem uma propriedade persisted. Se for false, você pode ter certeza de que a página não está prestes a entrar no bfcache. No entanto, o fato de persisted ser true não garante que uma página será armazenada em cache. Isso significa que o navegador pretende armazenar a página em cache, mas pode haver outros fatores que impossibilitam isso.
window.addEventListener('pagehide', (event) => {
if (event.persisted) {
console.log('This page *might* be entering the bfcache.');
} else {
console.log('This page will unload normally and be discarded.');
}
});
Da mesma forma, o evento freeze é disparado imediatamente após o evento pagehide se persisted for true, mas isso significa apenas que o navegador pretende armazenar a página em cache. Mas ele ainda pode descartar o conteúdo por vários motivos, explicados mais adiante.
Otimizar suas páginas para bfcache
Nem todas as páginas são armazenadas no bfcache, e mesmo quando uma página é armazenada lá, ela não fica indefinidamente. É fundamental que os desenvolvedores entendam o que torna as páginas qualificadas (e não qualificadas) para o bfcache e, assim, maximizem as taxas de acerto do cache.
As seções a seguir descrevem as práticas recomendadas para aumentar ao máximo a probabilidade de o navegador armazenar suas páginas em cache.
Nunca use o evento unload
A maneira mais importante de otimizar o bfcache em todos os navegadores é nunca usar o evento unload. Nunca!
O evento unload é problemático para os navegadores porque é anterior ao bfcache, e muitas páginas na Internet operam sob a premissa (razoável) de que uma página não vai continuar existindo depois que o evento unload for acionado. Isso é um desafio porque muitas dessas páginas também foram criadas com a premissa de que o evento unload seria acionado sempre que um usuário saísse da página, o que não é mais verdade (e não é verdade há muito tempo).
Assim, os navegadores enfrentam um dilema: precisam escolher entre algo que pode melhorar a experiência do usuário, mas também pode quebrar a página.
No computador, o Chrome e o Firefox optaram por tornar as páginas inelegíveis para o bfcache se elas adicionarem um listener