2010-01-20 31 views
25

Me gustaría tener imágenes, CSS y javascript en caché del lado del cliente en su navegador cuando cargan una página web. Hay tantos tipos diferentes de almacenamiento en caché que no estoy seguro de cuáles usar con asp.net mvc.cómo almacenar en caché css, images y js?

¿También sería posible que sus navegadores busquen versiones nuevas o modificadas de estos archivos?

Gracias!

Respuesta

6

Los navegadores se ocupan de esto automáticamente, en realidad. Tienes que salir de tu camino para que NO cache css, js, html e imágenes.

No estoy tan familiarizado con ASP MVC, pero creo que el tipo de almacenamiento en caché que está considerando es el almacenamiento en caché de código de operación para su salida dinámica creada en el servidor.

+0

Las cosas no son tan simples. El almacenamiento en caché es importante si le importa un sitio libre de errores y de buen rendimiento. Desea evitar que los visitantes tengan que volver a descargar el contenido, pero también quiere evitar que los visitantes tengan contenido desactualizado. En ASP.NET MVC utilizo un enfoque que incluye un hash MD5 en la URL que lo logra sin pensarlo demasiado una vez que está configurado. Consulte [mi respuesta aquí] (http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351) para obtener el código fuente. –

+0

@Drew Claro, esto no fue una descripción general del almacenamiento en caché. Simplemente le digo al solicitante que si no necesita un control detallado, los valores predeterminados existentes en los navegadores y servidores no son tan malos. Apache generalmente está configurado para servir ETags, etc. y los navegadores generalmente van junto con 304s. Comprobó su solución, ¡y esa es una buena idea! Es probable que use esa idea en Django pronto. – JAL

-2

El caché del lado del cliente se maneja automáticamente por los navegadores cuando properly setCache-Control headers y establece web.config. De la misma manera:

<system.webServer> 
    <staticContent> 
     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" /> 
    </staticContent> 
</system.webServer> 
+3

No es tan simple realmente. Debe proporcionar los encabezados apropiados en la respuesta HTTP. Además, debe indicarles a los navegadores que invaliden su caché de alguna forma cuando su contenido cambie, de lo contrario, el sitio falla hasta que realicen una actualización. –

43

Debe establecer encabezados de control de caché en el servidor. Esto se puede hacer por pegar esto en su web.config:

<system.webServer> 
    <staticContent> 
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> 
    </staticContent> 
</system.webServer> 

Esto podría decirle al navegador ahora incluso comprobar si hay nuevos contenidos en cualquier cosa estática durante 30 días.

Para su segunda pregunta, proporcione algún mecanismo para agregar una cadena de consulta al contenido. En mi proyecto actual, comprimemos y combinamos y javascript y css como parte de la compilación. Al poner enlaces en la página es el siguiente aspecto:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script> 

La cadena de consulta es el número Major.Minor.0.Changeset y cambios en cualquier momento que empujar una acumulación, haciendo que el cliente para volver a buscarla. Lo mismo sucede exactamente en las hojas de estilo en su elemento <link>.

+0

¿Esa caché de cliente también almacenará en caché el html? Me gustaría acelerar las áreas de mi cuenta que hacen un uso intensivo de ajax guardando solo los scripts, css e imágenes (no el html). ¿Qué recomendarías para esto? – chobo

+0

@chobo: Esto solo afectaría al contenido estático ... esta es una dirección para IIS 7 sobre cómo manejar cosas que ASP.Net no hace (imágenes, css, js). Cualquier cosa dinámica como un aspx no ** ** obtiene este encabezado y no se almacenará en caché. –

+0

El uso de cadenas de consulta para las versiones significa que algunos servidores proxy no almacenarán en caché el archivo. Mejor ponerlo en la URL directamente. Y si va a hacer eso, use un hash MD5 del contenido del archivo y cambie el concepto de control de versiones para el concepto de identidad. Tengo un [código fuente aquí] (http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351) que muestra cómo lo hago en este momento . Apreciaría pensamientos y comentarios. –

4

@Paul Creasey y @Salsa son correctos de que los navegadores manejarán el almacenamiento en caché por defecto siempre que el enlace sea el mismo.

Como mencionó, esto plantea un problema cuando necesita actualizar esos archivos ya que no tiene garantía de que el navegador del cliente verifique si hay una versión actualizada. En muchos casos, solo lo hacen después de que ha transcurrido un período de tiempo fijo que puede crear una experiencia de usuario pésima.

Hay una serie de preguntas que ya se han hecho en este sitio sobre cómo manejar la alerta de los navegadores del cliente al refresh the cache. En resumen, todos confían en cambiar el enlace cuando cambias los contenidos del archivo.

Se puede añadir un parámetro a la URL que sólo se utilizará con fines de almacenamiento en caché como:

<script src="/myJavascript.js?version=4"></script> 

A continuación, sólo cambiar el número de versión cuando cambia el contenido y la necesidad de forzar un lado del cliente ala de refresco this answer.

0

Esto se realiza mejor en IIS o en su archivo de configuración: asegúrese de que sus CSS/JS/imágenes estén configuradas para que nunca caduquen.

Cuando los referencia desde su código, le sugiero que añada una versión o fecha de compilación al nombre del archivo, p. script.js?20100120, de modo que cuando llegue a cambiarlos, solo necesita cambiar la versión para forzar una actualización de todos los navegadores que la han guardado en caché.

1

Tome un vistazo a la answer I posted here una solución que maximiza el beneficio de utilizar el almacenamiento en caché, y evita cualquier problema con los usuarios que necesitan 'duro' refresh (Ctrl +F5).

Utiliza un hash MD5 del contenido en la URL, por lo que la URL permanece igual siempre que el archivo sea el mismo, lo cual es realmente el objetivo. El cálculo del hash es súper rápido y se almacena en caché en la memoria del servidor para que el procesamiento de la página no disminuya notablemente. Todo se mide en microsegundos, y los beneficios han sido (hasta el momento, my site for scuba divers) increíbles. Lo aplico a todas las imágenes, CSS y JS con la excepción de las imágenes de los archivos CSS, ya que no están generadas en el servidor en mi sitio (todavía)

Cuestiones relacionadas