Por que os navegadores fazem ineficientemente duas solicitações aqui?

Notei algo estranho em relação ao ajax e ao carregamento de imagens. Suponha que você tenha uma imagem na página e o ajax solicite a mesma imagem - alguém poderia supor que as solicitações de ajax atingissem o cache do navegador ou pelo menos deveria fazer apenas uma solicitação, a imagem resultante indo para a página e o script que deseja para ler / processar a imagem.

Surpreendentemente, descobri que, mesmo quando o javascript aguarda o carregamento da página inteira, a solicitação de imagem ainda faz uma nova solicitação! Isso é um bug conhecido no Firefox e Chrome ou algo ruim que o jQuery ajax está fazendo?

Aqui você pode ver o problema, abra o Fiddler ou o Wireshark e defina-o para gravar antes de clicar em "executar":

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="something" style="background-image:url(http://jsfiddle.net/img/logo-white.png);">Hello</div>
<script>

jQuery(function($) {
    $(window).load(function() {
        $.get('http://jsfiddle.net/img/logo-white.png');
    })
});

</script>

Observe que, no Firefox, ele faz duas solicitações, resultando em 200-OK e enviando a imagem inteira de volta ao navegador duas vezes. No Chromium, ele recebe pelo menos corretamente um 304 na segunda solicitação, em vez de baixar o conteúdo inteiro duas vezes.

Curiosamente, o IE11 baixa a imagem inteira duas vezes, enquanto parece que o IE9 a armazena em cache de maneira agressiva e baixa uma vez.

Idealmente, espero que o ajax não faça uma segunda solicitação, pois está solicitando exatamente o mesmo URL. Existe uma razão para o css e o ajax nesse caso geralmente terem caches diferentes, como se o navegador estivesse usando armazenamento em cache diferente para solicitações de css vs ajax?

questionAnswers(9)

yourAnswerToTheQuestion