2010-01-20 49 views
25

我想在加载网页时在其浏览器上安装图像,CSS和JavaScript缓存客户端。有很多不同类型的缓存,我很困惑哪些与asp.net mvc一起使用。如何缓存css,图像和js?

他们的浏览器是否可以检查这些文件的新版本或修改版本?

谢谢!

回答

6

浏览器会自动为您自动处理此问题。你必须竭尽全力让他们不要缓存css,js,html和图像。

我不熟悉ASP MVC,但我认为他们想要的缓存类型是您创建的动态输出服务器端的操作码缓存?

+0

事情并非如此简单。如果你关心一个无缺陷且性能良好的网站,缓存是非常重要的。您希望避免访问者重新下载内容,但您也希望避免访问者拥有过时的内容。在ASP.NET MVC中,我使用了一种在URL中包含MD5哈希的方法,该方法在设置完成后无需太多考虑即可实现。检查[我的答案在这里](http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351)的源代码。 –

+0

@Drew当然,这并不是要对缓存进行概述。只要告诉提问者,如果你不需要更好的粒度控制,浏览器和服务器中的现有默认值就不会那么差。 Apache通常配置为服务ETags等,浏览器通常与304s一起使用。检查出你的解决方案,这是个好主意!我很可能很快会在Django中使用这个想法。 – JAL

-2

当您在properly setCache-Control headers并设置web.config时,客户端缓存由浏览器自动处理。像这样:

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

真的不是那么简单。您必须在HTTP响应中提供适当的标题。此外,当内容发生变化时,您需要告诉浏览器以某种方式使缓存失效,否则该网站将失败,直到他们进行硬刷新。 –

43

您需要在服务器上设置缓存控制标头。你可以在你的web.config坚持这样做:

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

这将告诉浏览器现在甚至检查上的任何静态30天的新内容。

对于第二个问题,提供一些将查询字符串添加到内容的机制。在我当前的项目中,我们压缩并组合了javascript和css作为构建的一部分。将在页面中的链接时,看起来像:

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

的查询字符串是Major.Minor.0.Changeset数量和变化随时都推动构建,导致客户端重新获取它。 <link>元素中的样式表发生同样的事情。

+0

该客户端缓存是否也缓存的HTML?我想通过缓存脚本,css和图像(而不是html)来加速我的帐户区域,从而大量使用ajax。 你会为此推荐什么? – chobo

+0

@chobo:这只会影响静态内容...这是IIS 7如何处理ASP.Net不处理的图像(图像,css,js)。任何像aspx这样动态的东西都不会**获得这个头,并且不会被缓存。 –

+0

对版本使用查询字符串意味着某些代理服务器不会缓存该文件。最好将它直接放在URL中。如果您打算这么做,请使用文件内容的MD5散列,并将身份概念的版本控制概念进行交换。我有一些[源代码在这里](http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351),这表明我现在怎么做。会欣赏想法和反馈。 –

4

@Paul Creasey和@Salsa都是正确的,浏览器默认会处理缓存,只要链接相同即可。

正如您所提到的,当您需要更新这些文件时会产生问题,因为您无法保证客户端的浏览器会检查更新的版本。在许多情况下,他们只会在经过一段固定的时间后才能做到这一点,这可能会造成糟糕的用户体验。

本网站已经询问了很多关于如何处理提醒客户端浏览器到refresh the cache的问题。简而言之,当您更改文件内容时,它们都依赖于更改链接。

您可以附加一个参数,将仅用于高速缓存的目的,如网址:

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

然后,只需更改版本号当您更改的内容,并需要强制客户端刷新ALA this answer

0

这最好在IIS或您的配置文件中完成 - 确保您的CSS/JS /图像设置为永不过期。

当您从您的代码中引用它们时,我建议在文件名后附加版本或生成日期。的script.js?20100120,因此,当您确实需要更改它们时,只需更改版本即可强制从缓存该版本的所有浏览器进行刷新。

1

看看在answer I posted here的最大化利用高速缓存的好处的解决方案,并避免与需要用户的任何问题,“硬”刷新(按Ctrl + F5 )。

它在URL中使用内容本身的MD5散列,因此只要文件相同,URL就保持不变,这实际上就是目标。计算哈希速度非常快,并且它被缓存在服务器的内存中,因此页面渲染速度不会明显变慢。整个事情以微秒为单位进行测量,到目前为止已经有好处(在my site for scuba divers)。我将它应用于所有图像,CSS和JS,但CSS文件中的图像除外,因为它们不是由我的网站上的服务器生成的(还)。