Browser Cache — Guia Consolidado¶
Esta nota agrupa os tópicos de Browser Cache em um único material, reduzindo repetição e mantendo os pontos comuns em contexto.
Índice rápido¶
Cache-Control¶
O que é¶
Cache-Control define políticas de cache para browser, proxies e CDNs.
Por que isso existe¶
Sem diretivas claras, cada camada aplica heurísticas diferentes e gera inconsistência.
Como funciona internamente¶
- Servidor envia diretivas (max-age, no-store, public/private).
- Browser decide frescor sem contato com origem enquanto válido.
- Com must-revalidate/stale-* ajusta comportamento sob erro/latência.
- Diretivas interagem com ETag/Last-Modified para revalidação.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - HTTP Cache - ETag - Como debugar problemas de cache
ETag¶
O que é¶
ETag é um identificador de versão da resposta para revalidação condicional no cache do navegador.
Por que isso existe¶
Evita baixar novamente recursos inalterados, economizando banda.
Como funciona internamente¶
- Servidor responde com ETag.
- Browser envia If-None-Match em nova request.
- Servidor compara versão e retorna 304 ou 200 com novo corpo.
- ETag fraco/forte influencia sensibilidade a mudanças.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - HTTP Cache - Cache-Control - Keep Alive
HTTP Cache¶
O que é¶
HTTP Cache é o mecanismo automático do navegador para reutilizar respostas baseado em headers de cache.
Por que isso existe¶
Reduz latência, consumo de banda e carga no backend em recursos repetidos.
Como funciona internamente¶
- Resposta chega com Cache-Control/ETag/Last-Modified.
- Browser calcula freshness e elegibilidade por método/status.
- Se stale, pode revalidar com If-None-Match/If-Modified-Since.
- 304 mantém corpo local e atualiza metadados.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Cache-Control - ETag - Como debugar problemas de cache
Service Workers e Cache¶
O que é¶
Service Worker é um worker em segundo plano que intercepta requests e permite experiências offline e caching avançado.
Por que isso existe¶
Desacopla estratégia de entrega da navegação tradicional, útil para PWAs e resiliência de rede.
Como funciona internamente¶
- Script é registrado e instalado pela página.
- No evento activate, versões antigas podem ser limpas.
- No fetch, lógica decide entre cache e rede.
- Atualizações são transacionais e controladas por ciclo de vida próprio.
Exemplo prático¶
curl -i https://example.com
GET / HTTP/1.1
Host: example.com
Relação com outros conceitos¶
Relaciona-se com: - Cache Storage - HTTP Cache - IndexedDB
Pontos comuns da família (backend/devops)¶
- Essencial para reduzir latência percebida e custo de tráfego em assets e respostas de API repetidas.
- Ajuda a coordenar deploy com versionamento/invalidação para evitar conteúdo stale pós-release.
- Melhora previsibilidade entre browser, CDN e origem em cenários de cache quente e frio.
Problemas comuns da família¶
- Misturar diretivas incompatíveis e gerar comportamento imprevisível entre camadas de cache.
- Ignorar
Vary, ETag e estratégia de revalidação, causando miss desnecessário ou inconsistência. - Alterar CDN/backend sem validar impacto no cache do navegador.