Avisar de contenido inadecuado

Cómo evitar problemas con la cache del navegador

{
}

En esta ocasión veremos como evitar un problema con el que seguro os habréis topado en más de una ocasión: El navegador no detecta un cambio que hemos realizado en un archivos estático ( CSS / Javascript / imagen ) y usa la copia cacheada en disco, impidiendo que la web muestre los estilos correctos, actualizados, o lanzando un error Javascript por el uso de una función no existente, hasta que forzamos una actualización con Ctrl-F5.

El caché de los navegadores actúa en el 90% de las ocasiones como nuestro aliado. Permite que determinados archivos estáticos se carguen una única vez por usuario, y se lean desde el disco en sucesivas visitas, reduciendo drásticamente los tiempos de carga.

De todas formas, el caché también puede jugar en nuestra contra en determinadas ocasiones: Si hemos realizado modificaciones a un archivo estático en un intervalo corto de tiempo, y además estas modificaciones han hecho variar muy poco el tamaño de nuestro archivo, es muy probable que el navegador no detecte que existe una nueva versión, y en vez de descargar el fichero más actual, haga uso de la copia que guarda en el disco para montar la página.

Como apuntábamos al principio, las consecuencias de esto suelen ser desastrosas: webs descuadradas o errores javascript por culpa de funciones que "deberían estar", pero que el navegador no ha cargado. Y, claro , el Ctrl-F5 sirve para mostrar la página al compañero de mesa o para tranquilizar al jefe que ha pegado un bote en la silla al ver el resultado, pero el usuario no tiene ni idea... va a verlo todo descuadrado hasta que expire la caché o le dé por forzar la recarga ( cosa poco probable ).

La solución a este problema es sencillamente añadir un parámetro a la llamada que hagamos al archivo estático. Los hay que optan por usar una fecha, y otros simplemente un valor numérico. Yo soy de estos últimos: como suelo usar Subversion para el control de versiones, lo que hago es actualizar el valor con el nº de versión correspondiente. De esta forma puedo saber, además, cuándo se hizo la última modificacion "sensible" a la hoja de estilos, echando un vistazo al showlog.

<link rel="stylesheet" type="text/css" href="/css/estilos.css?id=393" />

Cada vez que cambiamos el parámetro que hemos añadido a la llamada al CSS ( o Javascript, o imagen... ), lo que estamos haciendo es forzar al navegador a descargar de nuevo el archivo, retomando de esta forma el control sobre cuándo cachear y cuándo no.

{
}
{
}

Comentarios Cómo evitar problemas con la cache del navegador


Gracias!



 Es realmente útil!

Esteve Esteve 09/10/2007 a las 09:50


puedes explicar mas detallado el codigo:



<link rel="stylesheet" type="text/css" href="/css/estilos.css?id=393" />



ese   id   a que se refiere, tengo un html que envia datos a un php, tambien se puede usar ese codigo en el html??? me gustaria que pudieras explicar mejor, gracias de antemano.



 Roger Delgado.

roger roger 27/10/2007 a las 17:44

¡no entendi lo del cohete a la luna!

Anónimo 07/04/2008 a las 16:40

es lo que estaba buscando, realmente util

gracias

javier 09/10/2008 a las 06:35

Maestro... mil gracias... me has salvado la vida!

Raul Raul 19/01/2011 a las 20:40
[...]cto en Hojas de estilo para impresión. Puedes usar parámetros en la llamada a tu CSS para mantener el control sobre la caché del navegador, y decidir cuándo debe expirar tu hoja de estilos o forzar a tus usuarios a descargarla de nuevo en su siguiente visita.[...]

Muchas gracias por esta entrada! Yo también andaba buscando justo esto!

José Manuel José Manuel 13/09/2011 a las 21:24

Muchas gracias por esta entrada! Yo también andaba buscando justo esto!

José Manuel José Manuel 13/09/2011 a las 21:25

A mi no me funciona :(/

fran fran 03/11/2011 a las 19:47

Hola, Me podrías decir en donde lo copio? en el html o en el css? gracias. manejo joomla 1.5

javi javi 12/01/2012 a las 19:11
Muchas gracias por el truco, aunque no ha pasado nada aún, en mi caso el problema es que se me guardaron los cambios en Chrome e IE 9, pero no se guardaba en Firefox ni en Opera; espero que se arregle. Copié la línea de " link rel..." en el del html.
Diego Diego 11/08/2012 a las 14:58
no se donde incrustar este código, ya lo hice en el índex.html y no me funciona, cuando entran a la pagina aun sale la anterior versión y esa ni siquiera esta en el servidor por que ya la borre, no se que hacer agradezco su apoyo. gracias
Francisco Francisco 18/10/2012 a las 17:02

Deja tu comentario Cómo evitar problemas con la cache del navegador

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre