已经有很多文章写过使用CDN（Content Delivery Network，内容交付网络）来实现静态内容（JQuery，images，CSS文件等）的优点了。（如果你还不熟悉CNDs，请看这篇Microsoft AJAX CDN博客，英文版Announcing the Microsoft AJAX CDN，Microsoft Ajax Content Delivery Network），但是CNDs最大的优势经常被忽视：
- 许多主要的站点都是用CDN，所以很有可能你的客户浏览器缓存已经包含了来自CDN的JQuery。当另一个站点要从Microsoft CDN加载一个JQuery版本的时候，但是如果你的客户端缓存的JQuery版本满足这个请求，这样就不会再去Microsoft CDN重新下载。
- 一旦内容从CDN中加载，如果内容是当前存在的，将来的请求不会引起与服务器的往返开销（即不会再向服务器发送请求），也就是说，客户端避免了HTTP 304。
- 服务器集群不需要协调ETag缓存验证。
下面将会用Fiddler工具和MVC电影示例来说明使用CDN的优势。
快速浏览浏览器缓存
浏览器缓存有两种主要机制：
- 在浏览器缓存中验证所请求的资源与服务器上是相同的。如果资源是相同的，服务器会返回一个HTTP 304响应，从而避免发送响应主体与内容的需要。许多人认为HTTP 304是一件好事，因为他们不需要发送一个完整的响应体。我将展示它们（HTTP 304响应）通常是对性能的拖累，因为这涉及到和服务器不必要的往返。
- 保鲜（Freshness）：如果缓存中的资源是新的（fresh），则直接从缓存中提取资源不需要校验服务器。
浏览器使用一种新鲜的启发式（freshness heuristic）来确定是否应该用服务器验证资源还是从缓存中获取资源、如果你清楚浏览器缓存，然后点击我的电影示例，将会下载几个静态文件到客户端缓存（JavaScript，CSS和images）。用IE9，Chrome和Firefox，你可以在接下来的几天里点击电影网站，浏览器会从浏览器的特定缓存中换区这些文件作为服务，甚至不需要检查服务器。浏览器将缓存这些静态文件，而不需要对服务器进行验证，除非下面的几种情况有一条为true。
- 不满足新鲜启发式（freshness heuristic）（也就是说，缓存中的文件不被认为是最新的）。
- 你已经更改了过期头（expires header）或其他缓存头。
- 你已经设置了浏览器禁用缓存（caching）。
- 资源更改了或者URL不同了。例如，下面的URL都是指向相同的modernizr脚本，但是因为每个URL是不同的，所以必须下载每个资源。
第一个和最后一个modernizer文件时由Cassini（默认的Visual Studio Web服务器）或是IIS Express服务器提供的，这就是为什么我们会看到端口号。中间的两个文件是由本机器IIS服务器提供的，但是使用了两个不同的主机名（localserver和实际名称q1）。你可以通过在General选项卡上选择浏览历史记录下的设置按钮，然后选择视图文件来检查IE9缓存。·
··
每个浏览器都有自己的缓存，所以Firefox不会使用由Chrome或IE缓存的文件。
下面的图片显示了一个浏览我的电影网站的Fiddler会话。因为我已经好几天没有浏览电影网站了，IE9被迫验证了modernizr和customerjQuery文件。
在Fiddler中选择缓存选项卡，其中给出了为什么需要验证的详细信息，以及在不需要服务器验证的情况下，浏览器将在多长时间内可以直接只用这些文件。在下面的示例中，在接下来的2天19小时20分钟内，IE9将直接从缓存中提取资源，而无需让服务器检查（并保存HTTP 304的往返信息）。当响应到期时，Fiddler中的缓存检查器将根据响应的头显示。例如，这里是IIS 7.5的默认响应，它包含一个ETAG和最后修改的头，但是没用过期信息：
没有提供显示的HTTP过期信息，这是一个很好的提示，说明你需要做什么，显示设置过期时间。最佳实践建议web开发人员应该为其内容指定一个明确的过期时间，以确保浏览器能够在不产生HTTP请求条件的情况下重用内容，以重新验证服务器的内容。如果资源更改，则更改资源的名称。下面的Web.config文件，添加了内容和脚本文件夹到浏览器缓存。
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> <clientCache cacheControlMode="UseExpires" httpExpires="Mon, 06 May 2013 00:00:00 GMT" /> </staticContent> </system.webServer> </configuration>
这里把过期头设置为两年，在IE9使用F12开发者工具，清楚缓存，然后浏览电影网站。使用Fiddler，我们可以看到过期头，将允许IE9直接从缓存中获取文件，而不需要在接下来的两年里检查服务器。
用Fiddler和IE9 F12开发者工具监视浏览器请求。
1，打开IE9，点击F12打开发者工具，之后删除缓存
2，打开Fiddler
3，在IE9开发者工具中，选择Network选项卡，接着选择开始捕捉（Start capturing），在电影应用程序中选择Home或About。
Fiddler明确的显示了IE没有对静态资源进行条件请求，也就是说，没有HTTP GET请求，也没有来自服务器的HTTP 304响应。为什么IE9显示了GET请求和服务器返回了304的请求？Eric Lawrence在他使用Fiddler进行了13分钟的调试的演示中解释了为什么。在安装F12网络监听器时，要确定给定的“来自缓存”的响应是否为“PreNetIO”（例如在本地缓存中是最新的）或“PostNetIO”（例如在本地缓存中，但使用条件HTTP请求用于验证新鲜（freshness）程度），这是很困难的。因此，有时F12将显示出误导的“（304）”当它意味着是（缓存）”时。
Firebug实际上更糟，它显示了每个静态资源的HTTP 200结果。
Chrome开发工具正确的显示了来自缓存的每个资源。
在ASP.NET MVC项目中加载资源的简单助手
下面的代码显示了我的修改后的MVC电影项目中的布局文件，它使用了LoadRes helper来加载静态资源和CDN资源。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
@LoadRes("Site.css")
@LoadRes("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css")
@LoadRes("modernizr-1.7.min.js")
@LoadRes("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js")
@LoadRes("http://ajax.aspnetcdn.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js")
@LoadRes("http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js")
@LoadRes("jquery-ui-1.8.11.custom.min.js")
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MovieLT</h1>
</div>
<div id="logindisplay">
No Login
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "SearchIndex", "Movies")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
@helper LoadRes(string sFile) {
// Not CDN but JavaScript
if (!sFile.Contains("http://") && sFile.EndsWith(".js")) {
<script src="@Url.Content("~/Scripts/" + sFile)" type="text/javascript"></script>
}
// CDN and JavaScript
else if (sFile.Contains("http://") && sFile.EndsWith(".js")) {
<script src="@sFile" type="text/javascript"></script>
}
// CDN and CSS
else if (sFile.Contains("http://") && sFile.EndsWith(".css")) {
<link href="@sFile" rel="stylesheet" type="text/css" />
// Not CDN but CSS
} else if (sFile.EndsWith(".css")) {
<link href="@Url.Content("~/Content/" + sFile)" rel="stylesheet" type="text/css" />
}
}
我使用LoadRes帮助类来清理用于加载资源的标记。
参考文献：
https://blogs.msdn.microsoft.com/rickandy/2011/05/21/using-cdns-and-expires-to-improve-web-site-performance/