.net 如何缓存css，图像和js？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2105481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to cache css, images and js?
提问by chobo
I would like to have images, css, and javascript cached client-side on their browser when they load up a web page. There are so many different types of caching I am confused as to which ones to use with asp.net mvc.
当他们加载网页时，我希望在他们的浏览器上缓存客户端的图像、css 和 javascript。有很多不同类型的缓存，我很困惑要在 asp.net mvc 中使用哪些缓存。
Would it also be possible to have their browsers check for new or modified versions of these files?
是否也可以让他们的浏览器检查这些文件的新版本或修改版本？
Thanks!
谢谢！
采纳答案by JAL
Browsers take care of this for you automatically, actually. You have to go out of your way to get them to NOT cache css, js, html and images.
实际上，浏览器会自动为您处理这些问题。您必须竭尽全力让它们不缓存 css、js、html 和图像。
I'm not that familiar with ASP MVC, but I think they type of caching you're thinking of is opcode caching for your created dynamic output server-side?
我对 ASP MVC 不是很熟悉，但我认为您正在考虑的缓存类型是您创建的动态输出服务器端的操作码缓存？
回答by Nick Craver
You need to set cache control headers on the server. You can do this by sticking this in your web.config:
您需要在服务器上设置缓存控制标头。您可以通过将其粘贴在您的 web.config 中来做到这一点：
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>
This would tell the browser now to even check for new content on anything static for 30 days.
这会告诉浏览器现在甚至在 30 天内检查任何静态内容上的新内容。
For your second question, provide some mechanism of adding a querystring to the content. In my current project we compress and combine and javascript and css as part of the build. When putting links in the page is looks like:
对于您的第二个问题，请提供一些向内容添加查询字符串的机制。在我当前的项目中，我们将 javascript 和 css 压缩和组合作为构建的一部分。在页面中放置链接时看起来像：
<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>
The querystring is the Major.Minor.0.Changeset number and changes anytime we push a build, causing the client to re-fetch it. The same exact thing happens on stylesheets in their <link>element.
查询字符串是 Major.Minor.0.Changeset 编号，并且会在我们推送构建时随时更改，从而导致客户端重新获取它。同样的事情发生在它们<link>元素中的样式表上。
回答by Michael La Voie
@Paul Creasey and @Salsa are both correct that browsers will handle caching by default so long as the link is the same.
@Paul Creasey 和 @Salsa 都是正确的，只要链接相同，浏览器就会默认处理缓存。
As you mentioned, this raises a problem when you need to update those files as you have no guarantee that the client's browser will check for an updated version. In many cases they only do this after a fixed amount of time has passed which can create a crummy user experience.
正如您所提到的，当您需要更新这些文件时，这会引发问题，因为您无法保证客户端的浏览器会检查更新的版本。在许多情况下，他们只在经过一段固定的时间后才会这样做，这可能会造成糟糕的用户体验。
There are a number of questions already asked on this site as to how to handle alerting the client browsers to refresh the cache. In short, they all rely on changing the link when you change the file's contents.
关于如何处理提醒客户端浏览器刷新缓存的问题，该站点上已经提出了许多问题。简而言之，当您更改文件内容时，它们都依赖于更改链接。
You can append a parameter to the URL that will only be used for caching purposes such as:
您可以向 URL 附加一个仅用于缓存目的的参数，例如：
<script src="/myJavascript.js?version=4"></script>
Then just change the version number when you change the contents and need to force a client side refresh ala this answer.
然后只需在更改内容时更改版本号，并且需要强制客户端刷新此答案。
回答by Drew Noakes
Take a look at the answer I posted herefor a solution that maximises the benefit of using caching, and avoids any problems with needing users to 'hard' refresh (Ctrl+F5).
查看我在此处发布的答案，以获取最大程度地利用缓存的好处并避免需要用户“硬”刷新 ( Ctrl+ F5) 的任何问题的解决方案。
It uses an MD5 hash of the content itself in the URL, so that the URL remains the same as long as the file is the same, which is really the goal. Calculating the hash is super fast, and it's cached in memory on the server so page rendering isn't noticeably slowed down. The whole thing is measured in microseconds, and the benefits have been (on my site for scuba divers) awesome so far. I apply it to all images, CSS and JS with the exception of images from within CSS files as they're not server-generated on my site (yet.)
它在 URL 中使用内容本身的 MD5 哈希值，因此只要文件相同，URL 就保持不变，这才是真正的目标。计算散列的速度非常快，并且它缓存在服务器的内存中，因此页面渲染不会明显减慢。整个过程以微秒为单位，到目前为止，好处（在我的潜水员网站上）非常棒。我将它应用于所有图像、CSS 和 JS，但 CSS 文件中的图像除外，因为它们不是在我的网站上由服务器生成的（还）。
回答by realworldcoder
This is best done in IIS or in your config file - make sure your CSS/JS/images are set to never expire.
这最好在 IIS 或您的配置文件中完成 - 确保您的 CSS/JS/图像设置为永不过期。
When you reference them from your code, I suggest appending a version or build-date to the filename, e.g. script.js?20100120, so that when you do come around to changing them, you just need to change the version to force a refresh from all the browsers that have cached it.
当您从代码中引用它们时，我建议在文件名后附加一个版本或构建日期，例如 script.js?20100120，这样当您确实要更改它们时，您只需要更改版本即可强制刷新来自所有缓存它的浏览器。
回答by Paul Creasey
Client side caching is handled automatically by browsers when you properly setCache-Control headersand set web.config. Like that :
当您正确设置Cache-Control 标头并设置 web.config时，浏览器会自动处理客户端缓存。像那样 ：
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" />
</staticContent>
</system.webServer>
