优化网站设计（二）：使用CDN

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不一样开发平台的一些建议。这方面的研究一直没有中止过，我在不一样的场合也分享过这样的话题。

做为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考

Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html

同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐全部的网站开发人员都应该学习这些最佳实践，并结合本身的实际项目状况进行应用。

接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，经过一个系列文章的形式，作些讲解和演绎，以帮助你们更好地理解这些原则，而且更好地使用他们。

准备工做

为了跟随我进行后续的学习，你须要准备以下的开发环境和工具

1. Google Chrome 或者firefox ，而且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你应该对这些浏览器的开发人员工具备所了解，你能够经过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你须要对ASP.NET的开发基本流程和核心技术有至关的了解，本系列文章很难对基础知识作普及。

本文要谈讨论的话题

这篇文章，我未来和你们探讨CDN的问题，这是第二条原则，相关概念能够参考这里 http://developer.yahoo.com/performance/rules.html#cdn

我将从几个方面来介绍这个话题：

1.什么是CDN?

CDN的全称是Content Delivery Network，中文直译过来是：内容交付网络。它的主要意思是，将某些内容进行交付的网络。对于网站开发而言，咱们所讲的内容一般指的是内容文件（例如javascript，css，图片等等），也就是说，这里所说的CDN的意思是指，创建（或者使用）一个更加有利于交付这些内容交付的网络。

2.为何须要CDN?

咱们必须认可，在很早的时候，是没有CDN的概念和需求的。那时候咱们网站所须要的javascript等文件，就是放在咱们的网站目录中，其实这也是一种内容交付的方式，并且每每仍是比较高效的。但直到有一天，咱们作了各类各样的网站，咱们就会发现另一个问题：就是针对同一个javascript文件，浏览器可能会缓存多个版本，例以下面这个截图所示

之因此会这样作，是由于浏览器是根据域(Domain)来缓存内容资源的，只要域不同，那么它就须要重复下载这些资源，并且使用一样的方式将它们缓存起来。

可是，这会带来一些小的问题：重复地下载，缓存这些一样的脚本文件是须要占用带宽和本地缓存文件空间的。

因而，人们想出来一个解决方法：既然浏览器是根据域来区分这些内容资源的，那么是否能够将这些内容都放在统一的一个域里面呢？这样就算是咱们有不少网站，咱们均可以使用一样的地址引用这些内容资源，那么就不会产生重复下载和缓存的问题了。

 

3.如何使用CDN

不少问题，关键在于想到了，只要想到了，接下去怎么作其实不难。就比如咱们如今讨论的这个CDN的问题。

咱们能够继续以博客园的主页为例来进行分析

发展到今天，咱们知道博客园是有不少站点的，例如www.cnblogs.com, news.cnblogs.com , q.cnblogs.com 等等。他们应该或多或少都会用到jquery这个通用库。那么博客园是怎么作到底呢？

从上图中我发现，他们作了一个所谓的公用的子站点：common.cnblogs.com ，里面存放了他们使用的jquery最终的版本。

实际上这就是一个最直接也是最简单的使用CDN的作法：若是你有不少站点，他们之间能够共享某些内容（例如javascript，css，image等），那么与其每一个站点放一份，就不如将他们统一地存在在一个地方，这样就能够减小下载的次数和缓存的体积了。

这样作还有一个好处就是：因为主流浏览器对于同一个域所容许保持的链接数都是有限制的（可参考 http://www.impng.com/web-dev/browser-max-parallel-connections.html 的介绍），HTTP 1.1协议甚至明确地建议将这个链接数限制为2（Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion）。那么，咱们采用CDN的作法来将某些内容放在不一样的域里面，从必定意义上能够增长下载的并行度。关于这个原则，也能够参考 http://developer.yahoo.com/performance/rules.html#split 

 

除了上述的作法（本身单独建一个站点来保存这些内容资源），若是你是作一个互联网应用，那么还能够享受到一些业界知名的厂商所提供的CDN服务，他们将不少最经常使用的javascript库，放在了统一的位置（一般他们的服务器是很快的），能够供全世界的网站开发人员无偿使用，这样作的好处是扩大了共享的范围，例如若是你要访问cnblogs.com ，它使用jquery的库，也许你在访问microsoft.com的时候就下载过了，因此连第一次都无需下载。

这些提供CDN服务的厂商有：

微软的CDN服务

http://www.asp.net/ajaxlibrary/cdn.ashx

Google的CDN服务

https://developers.google.com/speed/libraries/devguide

选择谁的服务，彻底取决你本身的喜爱。事实上，他们的用法也很接近，例如

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js" type="text/javascript"></script>

 

另外，我在上一篇文章中提到了为了减小请求数，咱们能够采用Bundle的形式将多个文件进行打包合并，若是遇到咱们但愿对某个文件使用CDN的状况，应该如何改进呢？请参考下面的代码

            config.UseCdn = true;
            config.Add(new ScriptBundle("~/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js").Include("~/scripts/jquery-2.0.0.min.js"));

须要注意的是，只有当web.config文件中，将compilation的debug设置为false,才会使用CDN, 不然将使用本地的文件。这也是为何咱们须要定义两个路径的缘由。

<compilation debug="false" targetFramework="4.5"/>

 

看起来不错，不是吗？可是CDN的使用，也有一些额外须要考虑到负面做用。

 

4.使用CDN的负面做用

使用CDN，尤为是使用第三方的CDN，须要考虑网络的可到达性。这些内容既然是Host在别人的服务器上面，那么从必定意义上说，并不是很可控。例如，由于众所周知的缘由，我上面没有使用Google提供的CDN地址。

另外，使用CDN由于会涉及到多个域，那么将违背下面两条原则：

Minimize HTTP Requests （这个我在上一篇文章详细介绍过）

http://developer.yahoo.com/performance/rules.html#num_http 

Reduce DNS Lookups （后续再介绍）

http://developer.yahoo.com/performance/rules.html#dns_lookups

 

很惊奇吗？为何这些原则（同时也号称为最佳实践）会自相矛盾呢？其实一点都不奇怪，世界原本就是辩证统一的。这些矛盾是客观存在的，咱们要作的是，综合他们的利弊，进行权衡。你说呢