Como evitar cache de arquivos css e js?
Esquema de Cache
Os browsers em geral armazenam os arquivos .css e .js no cache para aumentar a velocidade de carregamento das páginas de um determinado domínio. Ótimo, isso realmente melhora muito a performance. Acontece que nós, desenvolvedores, sofremos com isso.
Imagine uma rotina javascript, fazemos as correções no código, mas quando subimos e testamos o erro persiste, ou você altera a cor das fontes dos elementos input sobre e a cor continua a antiga. Então continuamos nos matando tentando descobrir o por quê? A resposta é simples. A versão anterior com o erro, ou com o estilo antigo está armazenado no cache do browser e mesmo limpando cache, não resolve.
O problema está nestas instruções abaixo (que deverá estar de preferência no header do html):
<link rel=”Stylesheet” type=”text/css” href=”css/outroestilo.css’” />
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”js/js/superfish.js”></script>
O que os browsers fazem quando vê estas linhas pela primeira vêz?
Baixa os arquivos no cache do domínio em questão, e o mantém para futuras visitas ao site. A partir daí sempre que você visitar os mesmos (até o cache vencer), o browser sempre usará os arquivos que estão no cache. Exceto se algo no href ou no src seja alterado, esses arquivos sempre serão os que estão no cache.
Então vou mostrar uma solução simples para resolver isso. Dentro na tag header do html, substitua os código mostrados acima pelo código abaixo:
// coloque seus arquivos dentro do array…
var aCSFiles = new Array(‘css/estilo.css‘, ‘css/outroestilo.css‘);
var aJSFiles = new Array(‘js/jquery-1.3.2.js‘, ‘js/superfish.js‘);// Daqui pra frente é só copiar
function TagLinkStyle() { var sFile = arguments[0] + (arguments[0].indexOf(‘?’) >= 0 ? “&” : “?”) + “t=” + Math.floor(Math.random() * 5000);document.write(“<link href=\”" + sFile + “\” rel=\”stylesheet\” type=\”text/css\” \/>”); }
function TagScriptJavascript() { var sFile = arguments[0] + (arguments[0].indexOf(‘?’) >= 0 ? “&” : “?”) + “t=” + Math.floor(Math.random() * 5000); document.write(“<script type=\”text\/javascript\” src=\”" + sFile + “\” language=\”javascript\”><\/script>”); }
for (i = 0; i < aCSFiles.length; i++) TagLinkStyle(aCSFiles[i]);
for (i = 0; i < aJSFiles.length; i++) TagScriptJavascript(aJSFiles[i]);
</script>
Prontinho. Uma solução simples e que não afeta o funcionamento de nenhum browser.
Até ao próximo post…
browser, cache, cache css e js, Javascript
Valeu Pimenta! Muito bom!
Mas quando puder, poderia explicar o codigo e seu funcionamento?
Valeu!
Bem, isso é o meu primeiro check-out para o seu blog! Somos um grupo de voluntários e iniciar uma nova iniciativa em uma comunidade regional no nicho exatamente o mesmo. Seu blog nos forneceu informações valiosas para trabalhar. Você tem feito um trabalho maravilhoso!
Pimenta! Adorei essa!