en Browser

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.

Posts Relacionados

Limpieza de floats en Internet Explorer 7 Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CS...
CSSEdit y las hojas de estilo bien organizadas  Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensa...
Hojas de estilo para impresión Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas. Aún a dia de hoy es habitual enco...
  • http://favestendres.com Esteve

    Gracias!

     Es realmente útil!

  • roger

    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.

  • Anónimo

    ¡no entendi lo del cohete a la luna!

  • javier

    es lo que estaba buscando, realmente util

    gracias

  • Raul

    Maestro… mil gracias… me has salvado la vida!

  • José Manuel

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

  • José Manuel

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

  • fran

    A mi no me funciona :(/

  • javi

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

  • Diego

    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.

  • Francisco

    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

  • Adán

    Eres un genio, no sabes cuánto me has ayudado