¿Por qué Firefox a veces almacena en caché mi código CSS y Javascript, a pesar de que ha cambiado?

En el sitio de mi producto, Firefox a veces “no detecta” los cambios en mi código CSS y Javascript. Más bien carga las versiones antiguas, por lo que parece que necesito borrar el caché. En una situación como esta, ¿qué debería hacer? Esto se relaciona con el último Firefox (16.0.1 en el momento de escribir esto).

¡EDITAR!

Me olvidé de decirlo errores para los archivos css localhost. Quiero decir, hay un archivo js antiguo, lo actualizo, lo cargo y en el servidor del producto, Firefox piensa que es el archivo localhost. La forma en que incluyo los archivos:

 

Si está usando un lenguaje del lado del servidor, podría usar un truco. Puede agregar una cadena después de .css / .js. En PHP, por ejemplo:

  

Cambia todas las páginas de recarga.

Echa un vistazo a este artículo sobre el almacenamiento en memoria caché .

Puede utilizar una técnica llamada “prevención de almacenamiento en memoria caché” donde adjunta una cadena de consulta a su llamada a su archivo css / js. A continuación, actualice la cadena de consulta siempre que actualice su css / js.

Ejemplo:

  

Como se menciona en varias otras respuestas, usted quiere tener un identificador único para sus activos estáticos basado en el contenido, es decir, el identificador cambia si y solo si el contenido cambia. De esta forma, los navegadores aún pueden usar una versión en caché de un recurso siempre que el contenido no haya cambiado, que es exactamente lo que usted desea. Esta técnica se denomina control de versiones de activos estáticos .

Entonces no use la hora actual o un número / cadena aleatorio. Si puede, use el tiempo de modificación del archivo o (mejor) el hash md5 de su contenido. Puede agregar este identificador como una cadena de consulta (que se ignorará) o ( mejor ) agregarlo al nombre del archivo antes de la extensión.

Para contrastar esto y despejar la confusión sobre la técnica de prevención de memoria caché mencionada en otras respuestas: la prevención de memoria caché es una técnica utilizada por los anunciantes para obligar al navegador a volver a cargar un recurso para que el anunciante pueda medir el número de impresiones de anuncios por el número de veces se solicita el recurso. Esto se logra fácilmente mediante el uso de un número aleatorio. Normalmente no desea utilizar esto para sus activos estáticos.

Puede adjuntar una versión al final de los css / js que envía al otro lado.

Por ejemplo

En lugar de www.foo.com/js/javascript.js , envíe www.foo.com/js/javascript.js?v=1 y
En lugar de www.foo.com/css/style.css , envíe www.foo.com/css/style.js?v=1

  • Puede usar una metaetiqueta para forzar la actualización. , o .
  • Puede forzar el encabezado HTTP: Cache-control: no-cache o Pragma: no-cache .
  • Puede agregar una cadena de consulta aleatoria a sus archivos CSS y JavaScript.

Solo tengo que borrar el caché o la actualización (Ctrl + F5) me temo.

Otra opción es simplemente cambiar el nombre del archivo JS o CSS para que FF no lo reconozca como un archivo en caché (por ejemplo, cambiar el nombre de style.css a style2.css).

style.css?randomnumber la carga

Intereting Posts