cómo almacenar en caché css, imágenes y JS?

StackOverflow https://stackoverflow.com/questions/2105481

Pregunta

Me gustaría tener imágenes, CSS y JavaScript del lado del cliente en caché de su navegador cuando cargan una página web. Hay tantos tipos diferentes de almacenamiento en caché estoy confundido en cuanto a cuáles usar con asp.net mvc.

¿También sería posible tener sus navegadores para comprobar las versiones nuevas o modificadas de estos archivos?

Gracias!

¿Fue útil?

Solución

Los navegadores hacerse cargo de esto de forma automática, en realidad. Usted tiene que salir de su manera de conseguir que NO caché CSS, JS, HTML e imágenes.

No soy tan familiarizados con ASP MVC, pero creo que el tipo de almacenamiento en caché que está pensando es el almacenamiento en caché de código de operación para su del lado del servidor creado salida dinámica?

Otros consejos

Es necesario cabeceras de control de caché establecido 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 sería decirle al navegador ahora incluso comprobar si hay nuevos contenidos en nada estática durante 30 días.

En su segunda pregunta, proporcionar algún mecanismo de añadir una cadena de consulta a los contenidos. En mi proyecto actual comprimimos y combinar y javascript y css como parte de la construcció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>

El cadena de consulta es el número Major.Minor.0.Changeset y cambia en cualquier momento empujamos una acumulación, haciendo que el cliente para volver a buscarla. Exactamente lo mismo ocurre en las hojas de estilo en su elemento <link>.

@ Pablo Creasey y @Salsa son ambas correctas que los navegadores se encargará de almacenamiento en caché de forma predeterminada, siempre y cuando el enlace es el mismo.

Como se ha mencionado, esto plantea un problema cuando tiene que actualizar esos archivos ya que no tienen garantía de que el navegador del cliente comprobará si hay una versión actualizada. En muchos casos sólo hacer esto después de una cantidad fija de tiempo ha pasado que puede crear una experiencia de usuario de mala muerte.

Hay una serie de preguntas ya formuladas en este sitio en cuanto a cómo manejar alertar a los exploradores de los clientes a actualizar la caché . En pocas palabras, todos se basan en el cambio de la relación cuando se cambia el contenido del archivo.

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

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

A continuación, sólo cambia el número de versión cuando cambia el contenido y la necesidad de obligar a un lado del cliente de actualización ala esta respuesta .

Tome un vistazo a la responder he publicado aquí una solución que maximiza el beneficio de utilizar el almacenamiento en caché, y evita cualquier problema con la necesidad de los usuarios de refresco 'duro' ( Ctrl + F5 ).

Se utiliza un hash MD5 del contenido mismo de la URL, por lo que la URL sigue siendo el mismo, siempre y cuando el archivo es el mismo, lo cual es realmente el objetivo. Calcular el hash es muy rápido, y está en la memoria caché en el servidor para la renderización de páginas no se ralentiza notablemente más abajo. Todo esto se mide en microsegundos, y los beneficios han sido (en mi sitio para los buceadores ) impresionante hasta ahora. Lo aplico a todas las imágenes, CSS y JS con la excepción de las imágenes desde el interior de los archivos CSS, ya que no están en mi sitio generado por el servidor (todavía).

Esto se realiza mejor en IIS o en el archivo de configuración -. Asegúrese de que el CSS / JS / las imágenes se establece en no caduque nunca

Cuando se les hace referencia a partir del código, sugiero añadiendo una versión o fecha de creación del nombre de archivo, por ejemplo, script.js? 20100120, de modo que cuando usted viene alrededor para cambiarlas, sólo tiene que cambiar la versión para forzar una actualización de todos los navegadores que han caché él.

almacenamiento en caché del lado del cliente se realiza automáticamente por los navegadores cuando configurar correctamente cabeceras Cache-control y conjunto web.config. Al igual que: 

<system.webServer>
    <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" />
    </staticContent>
</system.webServer>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top