[OFF] Forçar browser a carregar CSS e scripts

7,772 views
Skip to first unread message

Adriano 'Stanley'

unread,
May 17, 2011, 11:06:53 AM5/17/11
to jque...@googlegroups.com
Pessoal, to com um problema que vem acontecendo já a algum tempo e não acho solução pra isso.

Sempre que faço uma publicação de uma aplicação web e há alterações em um .css ou em um .js, o cliente tem que entrar no site e dar CTRL + F5 ou limpar a cache do navegador.

Existe alguma forma de forçar o cara a carregar esses tipos de arquivo sem mudar o nome deles? Tentei colocar um parâmetro na URL do .js pois aí ele só recarregaria quando eu mudasse o parâmetro, mas nada aconteceu.

Desculpem pelo off-topic mas é que a lista de jQuery é o mais próximo que considero de me ajudar com esse problema.

Obrigado!

Ruan Carlos

unread,
May 17, 2011, 11:18:37 AM5/17/11
to jque...@googlegroups.com
script.js?v=1.0
script.js?v=1.1

-----------------------------------------------------------------
Ruan Carlos
@ruanltbg
www.ruancarlos.com.br
Bacharel em Sistemas de Informação - Desenvolvedor web

Gian Soares

unread,
May 17, 2011, 11:18:29 AM5/17/11
to jque...@googlegroups.com
se vc usa alguma linguagem de programação back end, pode passar como parâmetro o timestamp do arquivo

o rails faz isso automaticamente, printando algo assim

<link href="/stylesheets/application.css?1305608333" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery/jquery-1.4.2.min.js?1305599721" type="text/javascript"></script>

Toda vez q altero algum arquivo o timestamp dele muda e o número após a interrogação muda e os navegadores recarregam considerando ser outro arquivo. Sacou?

Abraço
Gianpaulo Soares


2011/5/17 Adriano 'Stanley' <adriano...@gmail.com>
mpar a cache do navegad

Arthur Cláudio de Almeida Pereira

unread,
May 17, 2011, 11:20:44 AM5/17/11
to jque...@googlegroups.com
Só explicando o que o Ruan mostrou.
Se você colocar um versionamento no nome do arquivo você pode enganar o cache do browser pq quando você mudar algo e alterar o versionamento
o browser entenderá como um novo js.

abraços

Eduardo Rabelo

unread,
May 17, 2011, 5:35:40 PM5/17/11
to jque...@googlegroups.com
Só para eu poder entender,

No caso, tenho o mesmo problema, porém, com arquivos FLASH,

Também pesquisei e a solução vou alterar o nome do arquivo toda vez que colocar no servidor,

Então no caso, ficaria :

<script src="script.js=?v1.0"></script>

E colocar o nome do arquivo como apenas -> script.js 

Interpretei corretamente?

Um abraço,
Eduardo Rabelo
Contacts:
Skype: oieduardorabelo

Tanure

unread,
May 17, 2011, 6:14:39 PM5/17/11
to jque...@googlegroups.com
seta o expire header mais curto, via programação, meta tag ou .htaccess


Tanure

2011/5/17 Eduardo Rabelo <oieduar...@gmail.com>



--

Luiz Tanure

472f5a3aedb906cb767acdbdeaca6d8f

Adriano 'Stanley'

unread,
May 18, 2011, 9:19:37 AM5/18/11
to jque...@googlegroups.com
Ótimo, pessoal, vou testar as soluções. Mt obrigado a todos.

Neto Neto

unread,
May 18, 2011, 11:26:20 AM5/18/11
to jque...@googlegroups.com
A do expire heder curto é boa, mas isso iria deixar de aproveitar o cache do navegador. Amigo, acredite, você precisa usar o cache a seu favor, para deixar o site mais rápido. Para que ficar carregando o mesmo arquivo toda hora? Vai inclusive, custar para o seu servidor isso. Utilize o esquema das variaveis get no nome do arquivo. Em último caso, o que custa renomear o arquivo?

Neto - Web developer
+55 81 8169.4400 / http://jneto.net.br

Tanure

unread,
May 18, 2011, 11:47:38 AM5/18/11
to jque...@googlegroups.com
realmente o Neto tem razão


utilize exprire curto apenas se seu site, css, imagens, etc for atualizado MUITAS vezes, ou durante a fase de ajustes

o parametro é a melhor saída, acho.. é só vc controlar bem o projeto tb

2011/5/18 Neto Neto <sputin...@gmail.com>
A do expire heder curto é boa, mas isso iria deixar de aproveitar o cache do navegador. Amigo, acredite, você precisa usar o cache a seu favor, para deixar o site mais rápido. Para que ficar carregando o mesmo arquivo toda hora? Vai inclusive, custar para o seu servidor isso. Utilize o esquema das variaveis get no nome do arquivo. Em último caso, o que custa renomear o arquivo?

Neto - Web developer
+55 81 8169.4400 / http://jneto.net.br



--

Luiz Tanure

472f5a3aedb906cb767acdbdeaca6d8f

Adriano 'Stanley'

unread,
May 18, 2011, 12:40:42 PM5/18/11
to jque...@googlegroups.com
Se não me engano essa dos parâmetros não funciona em todos os browsers.

Coloquei da seguinte forma:

arquivo.js?1

E ele continua utilizando o antigo arquivo.js.

Neto Neto

unread,
May 18, 2011, 1:18:24 PM5/18/11
to jque...@googlegroups.com
Parece que é o nosso velho amigo IE. Cara, porque você reluta tanto em renomear o arquivo?

file.1.2.js

Humberto Cruz

unread,
May 18, 2011, 1:33:40 PM5/18/11
to jque...@googlegroups.com
Adriano, verifique se o seu servidor está com o Google Speed Pages habilitado, eu ja tive problemas com isso, devemos usa-los apenas quando o site está pronto e não teremos mais alterações no .js e .css.

arquivos .js que contenha dados, como .json, ai sim um valor de no-cache é interessante, e como esses arquivos normalmente são carregados por meio de um .load, isso pode ser programado utilizando a hora corrente como valor da variavel, por exemplo: dados.json?no-cache=1305740000

[]s
Humberto

2011/5/18 Neto Neto <sputin...@gmail.com>



--
[]s
Humberto

Adriano 'Stanley'

unread,
May 19, 2011, 9:22:02 AM5/19/11
to jque...@googlegroups.com
Entendi Humberto. Obrigado Neto e a todos que me ajudaram neste tópico.

Beto Lima

unread,
Jun 5, 2013, 3:39:17 PM6/5/13
to jque...@googlegroups.com
aproveitando o gancho, pessoal teria como fazer por js forçar o browser a limpar o cache?
tipo da mesma forma se formos lá nas propriedades do browser e fazer uma limpeza total do cache....
Tenho um problema semelhante, mas não posso usar a meta no-cache pois como o amigo falou, vai acabar custando caro pro servidor...
A questão de colocar um parâmetro no js até que ponto isso funcionaria? Pergunto se esta solução é 100% eficaz....
Grato.








2011/5/19 Adriano 'Stanley' <adriano...@gmail.com>
Entendi Humberto. Obrigado Neto e a todos que me ajudaram neste tópico.

--



--
Att.
Beto Lima

André Luis

unread,
Jun 5, 2013, 4:14:06 PM6/5/13
to jque...@googlegroups.com
Pode por o meta no-cache mesmo, não vai custar tão caro assim pro servidor, quanto aos parâmetros para o javascript somente impedirá o cache do JAVASCRIPT (ou do css que for carregado), e não da página inteira...

Beto Lima

unread,
Jun 5, 2013, 4:23:58 PM6/5/13
to jque...@googlegroups.com
entendo, mas eu preciso usar o cache. a atualização no cliente é de tempos em tempos..
não existe uma data específica, então preciso que o cache me favoreça neste aspecto...
com relação aos parametros, se é confiável então irei usar, pois o que mais pega é exatamente js...
css não há problemas...
Grato...







--
--
Grupo de jQuery Brasil.
 
---
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar a inscrição neste grupo e parar de receber seus e-mails, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, acesse https://groups.google.com/groups/opt_out.
 
 



--
Att.
Beto Lima

Leo Guima

unread,
Jun 5, 2013, 4:40:26 PM6/5/13
to jque...@googlegroups.com
use um parâmetro diferente pra cada atualização, pois aí só vai renovar o cache caso haja alguma atualização.
Atenciosamente,

Leo Guima
PHP, JQuery, Mootools
(71) 8786-9091

Neto Neto

unread,
Jun 5, 2013, 4:45:15 PM6/5/13
to jque...@googlegroups.com
Vou dar duas sugestões:

1 - Expirando o cache dos arquivos em um tempo passado no header do arquivo por exemplo;
2 - Colocando um hash naquerystring de chamada do arquivo, algo como:
style.css?token=5465454 depois style.css?token=984464


Mas eu não aconselho isso. O cache não deve ser um problema para nós. Pelo contrário, devemos usá-lo sempre que possível, para poupar tráfego na rede.


Neto - Web developer
+55 81-9916.1778


2013/6/5 Leo Guima <leog...@gmail.com>

Leo Guima

unread,
Jun 5, 2013, 4:49:02 PM6/5/13
to jque...@googlegroups.com
Como eu disse Neto, o uso do hash/token/parametro pode sim resolver, sendo q não há a necessidade de ser ramdomico (que mude toda vez), ele pode alterar somente quando houver uma atualização do js

Beto Lima

unread,
Jun 5, 2013, 4:59:05 PM6/5/13
to jque...@googlegroups.com
entendi pessoal, o hash token vai cair como uma luva para minha necessidade, pois não haverá atualizações a todo momento..
Grato mais uma vez

Neto Neto

unread,
Jun 5, 2013, 5:03:47 PM6/5/13
to jque...@googlegroups.com
Beto, pois faça como o Wordpress, a cada atualização ele muda o has, algo como:


style.css?ver=3.5

Quando o cara atuaiza os scripts, o WP muda para 

style.css?ver=3.6

Assim, só força um novo download quando estritamente necessário. O pior erro é deixar esse hash dinâmico, mudando a cada requisição. Aí é cache 0.

Boa sorte (y)



Neto - Web developer
+55 81-9916.1778


2013/6/5 Beto Lima <beto...@gmail.com>

André Luis

unread,
Jun 5, 2013, 5:16:24 PM6/5/13
to jque...@googlegroups.com, adriano...@gmail.com
se usa PHP pode chamar <script src="js/script.js?<?PHP echo microtime(); ?>"></script>

Douglas Bezerra Possas

unread,
Jun 5, 2013, 5:18:35 PM6/5/13
to jque...@googlegroups.com
Cara, usando o microtime vc vai forçar SEMPRE uma releitura do arquivo.

Aconselho usar assim:

<script type="text/javascript" src="js/funcoes.js?t=<?php echo filemtime('js/funcoes.js'); ?>"></script>

Nesse caso, ele só ira "reler" o arquivo se vc atualizar o mesmo!


--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
---
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar a inscrição neste grupo e parar de receber seus e-mails, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, acesse https://groups.google.com/groups/opt_out.
 
 



--
Douglas Bezerra Possas
Programador PHP - JAVA - Android
Campo Grande  – MS – Brasil
Cel.: 67 9280 5866

MSN: con...@webmoderna.com.br
Skype: douglas.systematica
Twitter: dpossas

PORTFOLIO
http://www.rezendedarosa.adv.br
http://www.4iprcg.com.br
http://www.shopfrete.com.br

Neto Neto

unread,
Jun 6, 2013, 1:13:43 AM6/6/13
to jque...@googlegroups.com
@Douglas, muito massa esse esquema aí, vai ficar bem dinâmico.
Só não acho muito performático, porque manipulação de arquivos é bem lento. Imagine verificar a data de geração de uns 8 ou mais arquivos a cara renderização da página?

Acho interessante colocar uma constante e você muda quando fizer algum deploy

Neto - Web developer
+55 81-9916.1778


2013/6/5 Douglas Bezerra Possas <dougla...@gmail.com>

Henrique - gmail

unread,
Jun 6, 2013, 7:53:58 AM6/6/13
to jque...@googlegroups.com
De tanto levar pernada...passei a fazer assim:
 
<script src='head.min.js'></script>
<script>
var curDate = new Date();
var cuSt = curDate.getTime();
head.js(
   "http://code.jquery.com/jquery-1.7.2.js",
   "http://code.jquery.com/ui/1.9.1/jquery-ui.min.js",
   "http://www.modernizr.com/downloads/modernizr-latest.js",
   "cons2.js?op="+cuSt);
</script>
 
Henrique

André Luis

unread,
Jun 6, 2013, 7:54:29 AM6/6/13
to jque...@googlegroups.com, adriano...@gmail.com
EU imagino que ele esteja querendo fazer esta verificação somente em ambiente de desenvolvimento, pois se não for o caso nenhum dos dois métodos é viável, eu uso direto essa solução com microtime, mas faço somente em dev, quando os arquivos vão pro servidor de hospedagem eu deixo tudo em cache mesmo...

MAS, se mesmo em ambiente de produção ou homologação for necessário recarregar o script eu também aconselho a dica do Douglas, o filemtime perde pouca coisa em relação ao microtime porém quem perde menos com isso é o usuário final.

Boa dica Douglas, eu conhecia a função filemtime mas nunca parei para pensar nessa solução.


Em terça-feira, 17 de maio de 2011 12h06min53s UTC-3, Adriano 'Stanley' escreveu:

Douglas Bezerra Possas

unread,
Jun 6, 2013, 8:17:49 AM6/6/13
to jque...@googlegroups.com
@Neto, @André No sistema aqui da empresa a gente usa isso, eu que propus inclusive, carregamos cerca de 20, acredite, 20 arquivos ou mais, por questão de má estrutura do sistema quando iniciou o desenvolvimento, e não deu tanto peso não...

Eu sei que manipulação de arquivo é custoso, mas não achei tão problemático heim!


--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
---
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar a inscrição neste grupo e parar de receber seus e-mails, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, acesse https://groups.google.com/groups/opt_out.
 
 

Beto Lima

unread,
Jun 6, 2013, 8:46:39 AM6/6/13
to jque...@googlegroups.com
claro @Neto, não irei usar microtime nem forçar a cada requisição...
Será feito na mão mesmo só quando liberar uma versão nova do sistema...
Valeu pessoal...





Att.
Beto Lima

Marlon Pacheco

unread,
Jun 7, 2013, 10:44:52 PM6/7/13
to jque...@googlegroups.com, adriano...@gmail.com
Seia isso ??

Neto Neto

unread,
Jun 8, 2013, 3:09:29 PM6/8/13
to jque...@googlegroups.com
Provavlemente não.
Esse script aí é para remover o cache do servidor.
No nosso caso, é contornar o problema do cache no client. Mas, obrigado pela contribuição Marlon (y)

Neto - Web developer
+55 81-9916.1778


2013/6/7 Marlon Pacheco <marlo...@gmail.com>
--
--
Grupo de jQuery Brasil.
 

Marlon Pacheco

unread,
Jun 8, 2013, 11:39:24 PM6/8/13
to jque...@googlegroups.com, adriano...@gmail.com
Mas é justamente isso que o app cache faz. (http://slides.html5rocks.com/#app-cache).
Nesse artigo só criei uma maneira de o desenvolvedor não precisar alterar o arquivo de cache sempre que alterar um dos arquivos envolvidos.
No cache.manifest ficam indicados os arquivos que o navegador deverá disponibilizar no cliente, podendo inclusive rodar a aplicação off line.

Eduardo Kraus

unread,
Jun 10, 2013, 2:22:28 AM6/10/13
to jquery-br
Eu faço da seguinte maneira: http://php.eduardokraus.com/eu-vs-cache-ganhei-a-batalha

Além de "Pu!@ que pariu acabou com o cache" também ajuda em tornar o site mais rápido porque temos apenas um único CSS a ser carregado, e carrega mais rápido porque não tem os espaços em branco e comentários do CSS.

O que acham?
Reply all
Reply to author
Forward
0 new messages