Ayuda con el almacenamiento en caché agresivo de JavaScript

Question

Me encontré con un problema en el que realizo cambios en algunos archivos JavaScript a los que se hace referencia en un archivo HTML, pero el navegador no ve los cambios.Conserva la copia almacenada en caché en el navegador, aunque el servidor web tenga una versión más reciente.

Hasta que fuerzo al navegador a borrar el caché no veo los cambios.

¿Es esta una configuración de servidor web?¿Necesito configurar mis archivos JavaScript para que nunca se almacenen en caché?He visto algunas técnicas interesantes en el Kit de herramientas web de Google donde realmente crean un nuevo Nombre del archivo JavaScript cada vez que se realiza una actualización.Creo que esto es para evitar que los servidores proxy y los navegadores mantengan versiones antiguas de los archivos JavaScript con los mismos nombres.

¿Existe una lista de mejores prácticas en alguna parte?

Answer 1

Agregamos un número de compilación del producto al final de todo Javascript (y CSS, etc.) de la siguiente manera:

<script src="MyScript.js?4.0.8243">

Los navegadores ignoran todo lo que sigue al signo de interrogación, pero las actualizaciones generan una nueva URL que significa recarga de caché.

Esto tiene el beneficio adicional de que puede configurar encabezados HTTP que significan "¡nunca almacenar en caché!".

Answer 2

Conserva la copia almacenada en caché en el navegador, aunque el servidor web tenga una versión más reciente.

Probablemente esto se deba a que los encabezados HTTP Expires/Cache-Control están configurados.

http://developer.yahoo.com/rendimiento/rules.html#expires

Escribí sobre esto aquí:

http://www.codinghorror.com/blog/archives/000932.html

Este no es un mal consejo per se, pero puede causar grandes problemas si lo haces mal.En IIS de Microsoft, por ejemplo, el encabezado Expires siempre está desactivado de forma predeterminada, probablemente por esa misma razón.Al configurar un encabezado Expires en los recursos HTTP, le estás diciendo al cliente que nunca busque nuevas versiones de ese recurso - al menos no hasta la fecha de vencimiento en el encabezado Expires. Cuando digo nunca, lo digo en serio: el navegador ni siquiera preguntar para una nueva versión;simplemente asumirá que su versión almacenada en caché está lista para funcionar hasta que el cliente borre el caché o el caché alcance la fecha de vencimiento. Yahoo señala que cambian el nombre de archivo de estos recursos cuando necesitan actualizarlos.

Todo lo que realmente está ahorrando aquí es el costo de que el cliente haga ping al servidor para obtener una nueva versión y obtenga un encabezado 304 no modificado en el caso común de que el recurso no haya cambiado.Eso no es mucho gasto general...a menos que seas Yahoo.Claro, si tiene un conjunto de imágenes o scripts que casi nunca cambian, definitivamente aproveche el almacenamiento en caché del cliente y active el encabezado Cache-Control.El almacenamiento en caché es fundamental para el rendimiento del navegador;Todo desarrollador web debe tener un conocimiento profundo de cómo funciona el almacenamiento en caché HTTP.Pero utilícelo sólo de forma quirúrgica y limitada para aquellas carpetas o archivos específicos que puedan beneficiarse.Para cualquier otra cosa, el riesgo supera el beneficio.Ciertamente no es algo que desee activar como opción predeterminada general para todo su sitio web.a menos que le guste cambiar los nombres de los archivos cada vez que cambia el contenido.

Answer 3

@Jason y Darren

IE6 trata cualquier cosa con una cadena de consulta como no almacenable en caché.Deberías encontrar otra forma de obtener el número de versión en la URL, como un directorio falso:

<script src="/js/version/MyScript.js"/>

y simplemente elimine ese primer nivel de directorio después de js en el lado del servidor antes de cumplir con la solicitud.

EDITAR:Lo siento todo;es Squid, no IE6, el que no almacena en caché una cadena de consulta.Más información aquí.

Answer 4

Escribí una publicación de blog sobre cómo superamos este problema aquí:

Evitar problemas de almacenamiento en caché de hojas de estilo JavaScript y CSS en ASP.NET

Básicamente, durante el desarrollo puedes agregar un número aleatorio a una cadena de consulta después del nombre de tu archivo CSS.Cuando realiza una compilación de lanzamiento, el código cambia para usar el número de revisión de su ensamblaje.Esto significa que en su entorno de producción, sus clientes pueden almacenar en caché la hoja de estilo, pero cada vez que publique una nueva versión del sitio se verán obligados a volver a cargar el archivo.

Answer 5

También soy del método de simplemente cambiar el nombre de las cosas.Nunca falla y es bastante fácil de hacer.

Answer 6

¿Su servidor web envía los encabezados correctos para indicarle al navegador que tiene una nueva versión?También agregué la fecha a la cadena de consulta antes.es decir, myscripts.js?date=4/14/2008 12:45:03 (solo se codificaría la fecha)

Answer 7

@Darren El problema de almacenamiento en caché se produjo tanto en IIS 6 como en Apache 2 listos para usar.No estoy seguro de si la solución adecuada es modificar los encabezados de respuesta HTTP, sino tomar la ruta de cambio de nombre descrita en algunas de las respuestas aquí.

@Chris Buen consejo.Pensé que el enfoque de la cadena de consulta era bueno, pero parece que es necesario un nombre de archivo o directorio único para cubrir todos los casos.

Answer 8

Con cada lanzamiento, simplemente anteponemos un número entero que aumenta monótonamente a la ruta raíz de todos nuestros activos estáticos, lo que obliga al cliente a recargar (hemos visto que el método de cadena de consulta se interrumpe en IE6 antes).Por ejemplo:

• Lanzamiento 1:http://www.foo.com/1/js/foo.js
• Lanzamiento 2:http://www.foo.com/2/js/foo.js

Requiere reajustar los enlaces con cada versión, pero hemos creado una funcionalidad para cambiar automáticamente los enlaces en nuestras herramientas de implementación.

Una vez que haga esto, puede usar los encabezados Expires/Cache-Control que permiten al cliente almacenar en caché los recursos JS "para siempre", ya que la ruta cambia con cada versión, que creo que es a lo que se refería @JasonCohen.

Answer 9

Algunas técnicas muy útiles en aquí incluso si no planea utilizar powershell para automatizar la implementación.

Answer 10

Por lo que vale, vi deviantART sitio, bastante grande, que sirve sus archivos JS como 54504.js.Acabo de comprobarlo y veo que ahora los sirven como v6core.css?-5855446573 v6core_jc.js?4150339741, etc.

Si el problema de la cadena de consulta proviene del servidor, supongo que puedes controlarlo más o menos.