如何缓存css,图像和js?

时间:2010-01-20 22:23:49

标签: .net asp.net-mvc caching asp.net-caching

我希望在加载网页时在浏览器上将图像,css和javascript缓存在客户端。有很多不同类型的缓存我很困惑,哪些与asp.net mvc一起使用。

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

谢谢!

6 个答案:

答案 0 :(得分:45)

您需要在服务器上设置缓存控制标头。您可以通过将其粘贴在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>

querystring是Major.Minor.0.Changeset数字,并且在我们推送构建时随时更改,导致客户端重新获取它。在<link>元素的样式表中也会发生同样的事情。

答案 1 :(得分:6)

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

我对ASP MVC并不熟悉,但我认为你所考虑的缓存类型是你创建的动态输出服务器端的操作码缓存?

答案 2 :(得分:4)

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

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

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

您可以在URL中附加一个仅用于缓存目的的参数,例如:

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

然后只需在更改内容时更改版本号,并且需要强制客户端刷新ala this answer

答案 3 :(得分:2)

查看answer I posted here以获得最大化使用缓存优势的解决方案,并避免需要用户“硬”刷新的任何问题( Ctrl + F5 )。

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

答案 4 :(得分:0)

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

当您从代码中引用它们时,我建议在文件名中附加版本或构建日期,例如: script.js?20100120,这样当您确实需要更改它们时,您只需要更改版本以强制刷新所有已缓存它的浏览器。

答案 5 :(得分:-2)

当您properly set Cache-Control headers并设置web.config时,浏览器会自动处理客户端缓存。像那样:

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