CDN--前端性能优化
CDn
http://www.bootcdn.cn/
jq
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
优势:
- 1.不用担心自己网站访客,在任何时间,任何地点,任何网络运营商,都能快速打开网站。
- 2.各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少。
- 3.给网站直接带来的好处就是:流量,咨询量,客户量,成单量,都会得到大幅度提升。
国外的CDN:
- 1.Google Hosted Libraries
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
- 2.Microsoft CDN
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"
- 3.CDNJS
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"
- 4.jQuery官网
src="http://code.jquery.com/jquery-1.11.0.min.js"
- 5.jsDeliver
src="http://cdn.jsdelivr.net/jquery/2.0.0/jquery-2.0.0.min.js"
从图中可以看出国外的CDN最快的是CDNjs
国内的CDN:
- 1.百度
- 2.七牛
- 3.新浪
- 4.又拍云
- 5.360
从图中可以看出国内最快的是七牛
总结:
除国外的谷歌和CDNJS的服务外,国内的库均不支持HTTPS环境,可惜的是国内用户加载起来比较慢,如果把自己网站架设在国外可以优先考虑使用。如果CDN加载失败时,我们需要加载自己本地的jQuery文件,只需要在头部加上下面的代码就可以
1 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2 <script>window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js" type="text/javascript"><//script>')</script>
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