CDN优势及何时选择使用CDN

前言

简要介绍

内容分发网络（CDN， Content Delevery Network）可以解决分布共享库的问题。CDN就是一个由服务器构成的网络，这个网络的用途就是分散存储一些公共的内容。CDN中的每台服务器都包含库的一份副本，这些服务器分布在世界上不同的国家和地区，以便达到利用带宽和加快下载的目的。浏览器访问库的时候使用一个公共的URL，而CDN的底层则通过地理位置最近、速度最快的服务器提供相应的文件，从而解决了整个系统中的瓶颈问题。

What’s CDN ？

该问题可分五步回答

1. HTML文件的引用

HTML的文件头（也有文件中，文件尾）那边常有其他文件引用，比如CSS以及JS的引用。就以bootstrap常用的引用来举个例子
你常见的引用可能会是这样的：

<head>
    <title>Mushroom</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <!-- 引入 Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/js/jquery.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="/js/bootstrap.min.js"></script>
</head>

这之中，<script src="/js/bootstrap.min.js"></script> 这段就是外部脚本文件的一个链接，当前的这种链接是相对URL，指向站点内的文件，即你本项目里对应路径下面放置的文件。

属性值
值描述
URL 外部脚本的 URL。可能的值有：
•绝对 URL - 指向其他站点（比如 src=“www.example.com/example.js”）
•相对 URL - 指向站点内的文件（比如 src="/scripts/example.js"）

URL的引用有两种方式，绝对和相对，绝对的方式就是直接引用其他站点的js地址，比如我把上方的引用改为

<script src=“http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js”></script>

这样即是引用其他站点的js。
CSS文件的引用,图片以及其他文件的引用也类似，不赘述。

2. 系统的资源引用

在一个网站项目中，页面里经常会有许多js以及css的引用，接触过开发项目的一般都会了解，大部分界面里的脚本引用并不是像第一步里的那么精简，如果是直接引用项目内文件的话，他们可能是这样的：

<SCRIPT src="/iforums/templates/default/js/common.js" type=text/javascript></SCRIPT>
<SCRIPT src="/iforums/templates/default/js/ajax.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript src="/iforums/ueditor/third-party/jquery-1.10.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="/iforums/ueditor/ueditor.config.js"></SCRIPT>
<SCRIPT type=text/javascript src="/iforums/ueditor/ueditor.parse.js"></SCRIPT>
<SCRIPT type=text/javascript src="/iforums/ueditor/ueditor.all.js"></SCRIPT>

可能甚至引用的更多，这样将资源文件与业务代码一锅炖的方式适用于小型的，应用服务器压力并不是太大的系统（并发、带宽、存储空间、资源等等）。这种方式的优点是开发省力，发布省力，对服务器要求小，省钱，没有具体公网接入需求。许多小型，内部使用型的网站系统往往采取这种形式放置资源文件。

3. 系统访问量变高了，速度变慢了怎么办

怎么办？优化系统部署呗。怎么优化？优化方式有很多，读写分离，负载均衡，这方面的东西可以讲上三天三夜。具体到本问题的范畴内，那就是资源服务器与应用服务器的分离。粗暴的理解方式就是，就是应用安在应用服务器（一台或者是集群），资源部署在资源服务器（单台或者是集群），这时候，js以及css的引用就需要更改为绝对URL，指向对应的资源服务器。比如知乎的引用：

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(57px).png" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(72px).png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(76px).png" sizes="76x76" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(114px).png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(120px).png" sizes="120x120" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(152px).png" sizes="152x152" />

<script src="http://static.zhihu.com/static/revved/js/-/vendor.min.5a2082ff.js"></script>
<script src="http://static.zhihu.com/static/revved/js/-/closure/app_core.fb4023ac.js"></script>
<script src="http://static.zhihu.com/static/revved/js/-/closure/sign.e0ca7b10.js"></script>
<script src="http://static.zhihu.com/static/revved/js/-/closure/app.9eaaec15.js"></script>
<script src="http://static.zhihu.com/static/revved/js/-/closure/rich_text_editor.3a07c473.js"></script>

4.网络方面的优化

网站的访问速度，只基于一点，那就是页面包含的内容传输到用户电脑的速度，服务器搭的再好再完美，如果用户到服务器的链路之间有一段比较缓慢的话，整体速度也会被拉的十分差劲。想象一下，你给公司做了个运行于公司内网的网站，一切运行良好，分布式部署也已搭建完毕，一切都很完美。后来，你公司运营良好，开了一个十分遥远的分公司（不要问为什么遥远，再问自绝经脉），你们的内网也同时连了过去（对，就是那种很直接的搭了几条网线就把两个局域网连成一个局域网的黑科技）。但是因为太远了线节点太多了，分公司访问公司的系统十分缓慢，这时候你就愁啊，这可咋办？那不行就在分公司那边部署一套内容缓存好了，内容进行同步，这样至少分公司的网页访问速度能提升很多，你也可以立功升职加薪了。紧接着，因为你的出色表现，你们公司扩展十分厉害，在全国各地都建立了分公司，你又开始愁了，这不能每个分公司都搭一套啊，累得慌啊。思来想去，那就华东一套华北一套华南一套东北一套这样分吧，然后搭一些分发服务器，接入访问地址，然后跳转到就近的内容缓存服务器进行内容读取，OK，又到了升职加薪的时刻了~对，到这里，你已经完成了一套简易CDN的建设。

5.CDN是什么？

你的搭建只是基于你公司的大型局域网，而现行的流行CDN则是基于地球搭建的超大型局域网–因特网。它的好处是什么呢？
比如你这么写：

作者：流年
链接：https://www.zhihu.com/question/36514327/answer/68143522
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

上面的地址是百度CDN的链接地址。那么用户在读取网页内容的时候，就会去百度的就近服务器上掏这些js和css，而不是在你的服务器里捞。好处呢，第一，一般来说，访问速度有保障，稳定性也有保障；第二，你可以省下资源服务器的一部分资源负担，节省空间节省流量，艰苦创业，能省则省啊。这时候你会问了，为什么只有js和css呢？其他的图片啊html内容啊不能放进CDN吗？能啊为啥不能，CDN服务就靠这赚钱呢为啥不能。

使用CDN的优点

浏览器从服务器上下载css、js和图片等文件时都要和服务器连接，而大部分浏览器对同一个域名用于下载文件的并发连接数限制在4个，这意味着如果要下载第五个文件就必须等前四个文件中有一个已经加载完成，假如前4个文件都很大，第五个文件就要等很久，整个网页的加载速度就受限于此了。用CDN就可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加。
jQuery一类的库文件现在被广泛使用，如果访问你网站的用户的浏览器之前在访问别的网站时通过和你相同的CDN已经加载了jQuery，由于jQuery文件已经被缓存了，就不用重新下载了。
也许你的网站主机性能很好，但是应该不会比Google、Microsoft和Yahoo等大公司的容量和可扩展性更高，他们提供的CDN具有更好的可用性，更低的网络延迟和丢包率。
CDN能提供本地的数据中心，这样一来，那些远离你网站主服务器的用户也能就近很快地下载文件。
让你能够连接到特定版本的css文件或者js库文件，可以根据需求请求最新的版本。
很多商业付费的CDN能提供使用报告，这可以作为你自己网站分析报告的补充。
CDN能够分配负载，节省带宽，提高你网站的性能，降低你网站托管的成本，通常是免费的。

使用CDN的缺点

在开发阶段如果处在断网环境下，CDN文件是无法加载的。
一些免费CDN提供的文件可能是功能完整的包或者库文件，可能超过几百kb的大小，而许多时候网站只需要使用其中部分，你可以使用自己优化过、更小的css和js文件，让用户下载和执行的更快，当然你可以把自己的文件放到私人的CDN上，但这会需要额外的工作量和花费。
尽管一些流行的CDN文件事先缓存过的几率较大，但并不是一定的，一些移动设备的缓存可能很小而且效率很低，CDN的优势就不明显了，特别是当你可以在本地服务器上存放比CDN文件更小的文件时。
由于地理、法律、政策和商业上的阻隔，你所在的地区可能屏蔽了一些流行的免费CDN服务的域名或者IP地址。
CDN会有出故障的时候，这时候要有备用方案，也就是你的本地文件，这种处于稳定考虑的冗余会增大开发工作量和复杂度。
如果安全性对你的网站很重要，就不要使用公共的CDN，因为当你远程从CDN请求文件时，你的访问来源信息也被发送过去，一些远程的js文件可能被修改用来搜集你的用户或者系统信息，而当你使用https协议时，能选择的CDN就更加有限。
当你把文件控制交给Google、微软、亚马逊或者其他大的互联网公司时，你会考虑他们对你信息的搜集整理吗，这也许是多虑了，但是在互联网这一行里多一点这样的怀疑并不坏。

总结

1.几种明确不该用CDN的情况：

你构建的是内部网络应用，不与外部Internet连接；
像银行系统这样的应用，安全和隐私是最优先考虑的，就要让所有源文件和服务器位置完全处于自己掌控中；
你为公司或者国家开发的应用，而他们恰好对某些CDN的域名或者IP地址限制访问。

2.判断何时使用CDN

CDN对低流量的小网站性能提升并不明显，如果没有需要高带宽的视频、音频文件，把你的文件放在一起可能还更简单。
对流量高的网站，CDN可以大大提升性能，但假如你的用户以移动设备为主，可能自己优化过的小文件比CDN上的大文件要下载和执行的更快。
在实际中通过JavaScript搜集用户分别使用CDN文件和本地服务器文件时加载页面的速度，以决定一段时间内是选择CDN还是本地文件。
对于重要的文件，最好还是提供本地文件的冗余，以应对CDN文件不可用的情况。以jquery为例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery1.4.3/jquery.min.js"></script>
<script>!window.jQuery && document.write("<script src=\"scripts/jquery-1.4.3.min.js\">" + "<\/scrript>")

这里通过判断window.jquery全局对象是否存在来判断jQuery是否通过CDN加载成功，不成功就通过document.write方法来加载本地的jQuery文件，注意这里用到了转义字符‘\’避免浏览器将document.write方法内的“”当成了结束标签。

一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN，因为即使CDN文件不可用，网站也能做到平稳退化。

参考链接:
http://www.imooc.com/article/13673?block_id=tuijian_wz#comment
https://www.zhihu.com/question/36514327
https://www.sitepoint.com/should-you-use-a-cdn/

后记

向前走，别回头