如何缓存css、图像和js？答案

【问题标题】：how to cache css, images and js?如何缓存css、图像和js？
【发布时间】：2010-01-20 22:23:49
【问题描述】：

我希望在他们加载网页时在他们的浏览器客户端缓存图像、css 和 javascript。有太多不同类型的缓存，我对哪些与 asp.net mvc 一起使用感到困惑。

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

谢谢！

【问题讨论】：

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

【解决方案1】：

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

【讨论】：

clientcache 也会缓存 html 吗？我想通过仅缓存脚本、css 和图像（而不是 html）来加速我大量使用 ajax 的帐户区域。你会为此推荐什么？
@chobo：这只会影响静态内容...这是 IIS 7 关于如何处理 ASP.Net 无法处理的事情（图像、css、js）的方向。像 aspx 这样的任何动态都不获取此标头并且不会被缓存。
对版本使用查询字符串意味着某些代理服务器不会缓存文件。最好将其直接放在 URL 中。如果您要这样做，请使用文件内容的 MD5 散列，并将版本控制的概念换成身份的概念。我有一些source code here 显示我目前是如何做到的。非常感谢您的想法和反馈。
@Drew - 是的，这就是我们在 Stack Exchange 所做的 - 除了我们坚持使用查询字符串。如果您使用的代理不尊重不同的查询字符串是不同的内容……那么您就有更大的问题。
我相信现在用于 mvc 的 System.web.optimization 包的东西通过在包名称中附加某种 ?v=hash 字符串来自动处理其中的查询字符串部分。跨度>

【解决方案2】：

实际上，浏览器会自动为您解决这个问题。您必须竭尽全力让它们不缓存 css、js、html 和图像。

我对 ASP MVC 不太熟悉，但我认为您正在考虑的缓存类型是用于您创建的动态输出服务器端的操作码缓存？

【讨论】：

事情并没有那么简单。如果您关心一个没有错误且性能良好的网站，缓存很重要。您希望避免访问者必须重新下载内容，但您也希望避免访问者拥有过时的内容。在 ASP.NET MVC 中，我使用一种在 URL 中包含 MD5 哈希的方法，它在设置后无需过多考虑即可实现这一目标。查看out my answer here 获取源代码。
@Drew 当然，这不是缓存的概述。只是告诉提问者，如果您不需要更细粒度的控制，浏览器和服务器中的现有默认设置还不错。 Apache 通常配置为服务 ETag 等，浏览器通常与 304 一起使用。检查了您的解决方案，这是一个好主意！我很可能很快就会在 Django 中使用这个想法。

【解决方案3】：

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

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

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

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

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