caching - Pare o navegador para fazer solicitações HTTP para imagens que devem permanecer em cache - mod_expires

Translate

Depois de ler muitos artigos e algumas perguntas aqui,Eu finalmente consegui ativar o Apachemod_expirespara dizer ao navegador que ele DEVE armazenar imagens em cache por 1 ano.

<filesMatch "\.(ico|gif|jpg|png)$">
  ExpiresActive On
  ExpiresDefault "access plus 1 year"
  Header append Cache-Control "public"
</filesMatch>

E, felizmente, as respostas do servidor parecem estar corretas:

HTTP/1.1 200 OK 
Date: Fri, 06 Apr 2012 19:25:30 GMT 
Server: Apache 
Last-Modified: Tue, 26 Jul 2011 18:50:14 GMT 
Accept-Ranges: bytes 
Content-Length: 24884 
Cache-Control: max-age=31536000, public 
Expires: Sat, 06 Apr 2013 19:25:30 GMT
Connection: close
Content-Type: image/jpeg 

Bem, pensei que isso impediria o download do navegador e até mesmo perguntasse ao servidor sobre as imagens por 1 ano. Mas é parcialmente verdade: causase você fechar e reabrir o navegador, o navegador NÃO baixará as imagensdo servidor mais,mas o navegador ainda consulta o servidor com uma solicitação HTTP para cada imagem.

Como faço para forçar o navegador a parar de fazer solicitações HTTP para cada imagem? Mesmo que essas solicitações HTTP não sejam seguidas por um download de imagem, elas ainda são solicitações feitas ao servidorque aumenta a latência desnecessariamente e torna mais lenta a renderização da página!

Já falei para o navegador que DEVE manter as imagens em cache por 1 ano! Por que o navegador ainda consulta o servidor para cada imagem (mesmo que não baixe a imagem) ?!


Olhando os gráficos de rede no FireBug (menu FireBug> Rede> Imagens), posso ver diferentes comportamentos de cache (obviamente comecei com o cache do navegador completamente vazio, forcei a exclusão do cache no navegador usando "Limpar todo o histórico"):

  • Quando a página é carregada pela primeira vez, todas as imagens são baixadas(e a mesma coisa acontece se eu forçar o recarregamento de uma página clicando no botão recarregar página do navegador).Isso faz sentido!

  • Quando eu navego no site e volto para a mesma páginaas imagens não são baixadas e oo navegador NÃO consulta o servidorpara qualquer uma das imagens.Isso faz sentido (e eu gostaria de ver esse comportamento também quando o navegador é fechado)!

  • Quando eu fecho o navegador e o abro novamente na mesma página, o navegador bobo faz qualquer solicitação HTTP ao servidor uma vez por imagem: ele NÃO faz o downalod da imagem, mas ainda faz uma solicitação HTTP, é como se o navegador indagasse o servidor sobre a imagem(o servidor responde com 200 OK).É esse que me irrita!

Também anexo os gráficos abaixo se você estiver interessado:

enter image description here

enter image description here

EDIT: acabei de testar agora também com o FireFox 11.0 apenas para ter certeza de que não era um problema do meu FireFox 3.6 ser muito antigo. A mesma coisa acontece !!!Também testei o site do Google e o site Stackoverflow, ambos enviam oCache-Control: max-age=...maso navegador ainda faz uma solicitação HTTP ao servidor para cada imagem, uma vez que o navegador é fechado e aberto novamente na mesma página, após a resposta do servidor, o navegador NÃO baixa a imagem (como expliquei acima), mas ainda faz a maldita solicitação que aumenta o tempo para ver a página.

EDIT2: e removendo oLast-Modifiedcabeçalho como sugeridoaqui, não resolve o problema, não faz diferença.

This question and all comments follow the "Attribution Required."

Todas as respostas

Translate

Você estava usando a ferramenta errada para analisar as solicitações.

Eu recomendo o addon Firefox realmente útilCabeçalhos HTTP ativospara que você possa ver o que realmente está acontecendo na rede.

E só para ter certeza, você pode executar ssh / putty em seu servidor e fazer algo como

tail -f /var/log/apache2/access.log
Fonte
Translate

O comportamento que você está vendo é o pretendido (vejaRFC7234para mais detalhes), comportamento especificado:

Todos os navegadores modernos enviarão solicitações HTTP ao servidor para cada elemento de página exibido, independentemente do status do cache. Esta foi uma decisão de design feita a pedido de serviços da web (especialmente redes de publicidade) para garantir que os servidores HTTP fossem capazes de manter registros de cada exibição de cada elemento.

Se os navegadores não fizessem essas solicitações, o servidor nunca seria notificado de que uma imagem foi exibida ao usuário. Para as redes de publicidade, isso seria catastrófico. No início, as redes de publicidade 'hackearam' para contornar isso veiculando a mesma imagem de anúncio usando nomes gerados aleatoriamente (ex: 'coke_ad_1_98719283719283.gif'). No entanto, para os ISPs, essa prática causou um grande aumento nas transferências de dados, porque cada um de seus usuários estava baixando novamente essas imagens de anúncios idênticas, ignorando todos os servidores de cache / proxy que seu ISP estava operando.

Assim, uma trégua foi alcançada: os navegadores sempre enviariam solicitações HTTP, mesmo para elementos em cache não expirados. Os servidores responderiam com códigos de status HTTP 304 ("não modificado"). Isso permite que os servidores registrem o fato de que a imagem foi exibida para o cliente. Como resultado, as redes de publicidadegeralmenteparou de usar nomes de imagem aleatórios para ignorar servidores de cache de rede.

Isso deu às redes de anúncios o que elas queriam - um registro de cada imagem exibida - e aos ISPs o que elas queriam - imagens com capacidade de cache e conteúdo estático.

É por isso que não há muito que você possa fazer para impedir que os navegadores enviem solicitações HTTP para elementos de página em cache.

Mas se você olhar para outras soluções disponíveis do lado do cliente que vieram junto com o html5, há um escopo para evitar o carregamento de recursos

  1. Manifesto de Cache(apesar de suas pegadinhas)
  2. IndexedDB(bons recursos assíncronos, permite o armazenamento de blob)
  3. Armazenamento Local(não assíncrono)
Fonte
Translate

Há uma diferença entre "recarregar" e "atualizar". Apenas navegar para uma página com os botões voltar e avançar geralmente não inicia novas solicitações HTTP, mas especificamente pressionar F5 para "atualizar" a página fará com que o navegador verifique seu cache. Isso depende do navegador, mas parece ser a norma para FF e Chrome (ou seja, os navegadores que têm a capacidade de observar facilmente seu tráfego de rede). Pressionando F6, digite deve enfocar a barra de endereço URL e, em seguida, "ir" para ela, que deve recarregue a página, mas não verifique os ativos na página.

Atualizar: esclarecimento do comportamento de navegação para frente e para trás. É chamado de "Cache Back Forward" ouBFCacheem navegadores. Quando você navega com os botões voltar / avançar, a intenção é mostrar exatamente como a página estava quando você a viu em sua linha do tempo. Nenhuma solicitação do servidor é feita ao usar o back and forward, mesmo se um cabeçalho de cache do servidor informar que um determinado item expirou.

Se você vir (200 OK BFCache) em seu painel de rede do desenvolvedor, o servidor nunca foi atingido - mesmo para perguntar se-modificado-desde.

http://www.softwareishard.com/blog/firebug/firebug-tip-what-the-heck-is-bfcache/

Fonte
Translate

Se eu forçar uma atualização usando F5 ou F5 + Ctrl, uma solicitação será enviada. No entanto, se eu fechar o navegador e inserir o url novamente, NENHUMA solicitação será enviada. A maneira como testei se uma solicitação é enviada ou não foi usando pontos de interrupção na solicitação inicial no servidor, mesmo quando uma solicitação não foi enviada, ela ainda aparece no Firebug como tendo feito uma espera de 7 ms, então tome cuidado com isso.

Fonte
Translate

O que você está descrevendo aqui não reflete minha experiência. Se o conteúdo for servido com uma diretiva no-store ou você fizer uma atualização explícita, então sim, eu esperaria que ele voltasse para o servidor de origem, caso contrário, ele deve ser armazenado em cache nas reinicializações do navegador (assumindo que é permitido, e pode escrever um arquivo de cache).

Olhando suas cachoeiras com um pouco mais de detalhes (o que é complicado porque elas são um pouco pequenas e borradas), o navegador parece estar fazendo exatamente o que deveria -tementradas para as imagens - mas elas estão apenas carregandodo cache localnão do servidor de origem - verifique o cabeçalho 'Data' na resposta (por que você acha que está levando milissegundos em vez de segundos?). É por isso que eles são coloridos de forma diferente.

Fonte
Translate

Depois de passar um tempo considerável procurando uma resposta razoável, achei o link abaixo muito útil e ele responde à pergunta feita aqui.

https://webmasters.stackexchange.com/questions/25342/headers-to-prevent-304-if-modified-since-head-requests

Fonte
Translate

Se for uma questão de vida ou morte (se você deseja otimizar o carregamento da página desta forma ou se deseja reduzir a carga no servidor tanto quanto possível, não importa o que aconteça), então há uma solução alternativa.

Use HTML5armazenamento localpara armazenar imagens em cache depois de solicitadas pela primeira vez

  • [+]Você pode impedir que o navegador envie solicitações HTTP, que em 99% retornariam 304 (não modificado), não importa o quanto o usuário tente (F5, ctrl + F5, simplesmente revisitando a página, etc.)

  • [-]Você tem que colocar alguns esforços extras no suporte javascript para isso.

  • [-]As imagens são armazenadas em base64 (não podemos armazenar dados binários), por isso são decodificadas a cada vez no lado do cliente. Qual éusualmentemuito rápido e não é grande coisa, mas ainda é algum uso de CPU extra no lado do cliente e deve ser mantido em mente.

  • [-]O armazenamento local é limitado. Você pode usar ~ 5 MB de dados por domínio (Nota: base64 adiciona ~ 30% ao tamanho original da imagem).

  • [?]Apoiado pormaioriade navegadores.http://caniuse.com/#search=localstorage

Exemplo

Teste

Fonte
Translate

O que você está vendo no Chrome não é um registro das solicitações HTTP reais - é um registro das solicitações de ativos. O Chrome faz isso para mostrar que um ativo está realmente sendo solicitado pela página. No entanto, essa visão não indica realmente se a solicitação está sendo feita. Se um ativo for armazenado em cache, o Chrome nunca criará realmente a solicitação HTTP subjacente.

Você também pode confirmar isso passando o mouse sobre os segmentos roxos na linha do tempo. Os recursos em cache terão um(from cache)na dica de ferramenta.

Para ver as solicitações HTTP reais, você precisa olhar em um nível inferior. Em alguns navegadores, isso pode ser feito com um plugin (como Live HTTP Headers).

Porém, na realidade, para verificar se as solicitações não estão realmente sendo feitas, você precisa verificar os logs do servidor ou usar um proxy de depuração como Charles ou Fiddler. Isso funcionará em um nível HTTP para garantir que as solicitações não estejam realmente acontecendo.

Fonte
Translate

Validação de cache e a resposta 304

Existem várias situações em que o Internet Explorer precisa verificar se uma entrada em cache é válida:

  • A entrada em cache não tem data de validade e o conteúdo está sendo acessado pela primeira vez em uma sessão do navegador

  • A entrada em cache tem uma data de validade, mas expirou

  • O usuário solicitou uma atualização de página clicando no botão Atualizar ou pressionando F5

Se a entrada em cache tiver uma data de última modificação, o IE a envia no cabeçalho If-Modified-Since de uma mensagem de solicitação GET:

GET /images/logo.gif HTTP/1.1
Accept: */*
Referer: http://www.google.com/
Accept-Encoding: gzip, deflate
If-Modified-Since: Thu, 23 Sep 2004 17:42:04 GMT
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;)
Host: www.google.com

O servidor verifica o cabeçalho If-Modified-Since e responde de acordo. Se o conteúdo não tiver sido alterado desde a data / hora especificada, ele responde com um código de status 304 e uma mensagem de resposta que contém apenas os cabeçalhos:

HTTP/1.1 304 Not Modified
Content-Type: text/html
Server: GWS/2.1
Content-Length: 0
Date: Thu, 04 Oct 2004 12:00:00 GMT

A resposta pode ser baixada rapidamente porque não contém conteúdo e faz com que o IE leia do cache os dados de que necessita. Na verdade, é como um redirecionamento para o cache do navegador local.

Se o objeto solicitado realmente mudou desde a data / hora no cabeçalho If-Modified-Since, o servidor responde com um código de status de 200 e fornece a versão modificada do recurso.

Fonte
Translate

Esta pergunta tem uma resposta melhoraquino site de troca de pilha de webmasters.

Mais informações, que também são citadas no link acima, estão emhttpwatch

De acordo com o artigo:

Existem várias situações em que o Internet Explorer precisa verificar se uma entrada em cache é válida:

  • A entrada em cache não tem data de validade e o conteúdo está sendo acessado pela primeira vez em uma sessão do navegador
  • A entrada em cache tem uma data de validade, mas expirou
  • O usuário solicitou uma atualização de página clicando no botão Atualizar ou pressionando F5

    entre com o código aqui

Fonte
Leave a Reply
You must be logged in to post a answer.
Sobre o autor