CDN——到底用还是不用？

最近在学bootstrap，在知乎上搜索bootstrap看到有人问bootstrap基础包体积较大，对性能影响会不会很大，看到两种方法来减少对性能的影响：

1. 有选择地部分加载，bootstrap带有LESS和Sass版本，可以根据业务需求只加载需要用到的部分；bootstrap为不同的交互功能也提供了对应的js文件，不必直接加载bootstrap.min.js
2. 使用CDN加载

我还没有学过LESS和Sass，所以第一种方法我还不会，不过CDN这个概念我以前看“JavaScript DOM 编程艺术”这本书就接触过：

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

知乎上这个问题的一个回答者分享了一篇文章：“7 Reasons to use a Content Delivery Network”，我Google了一下这篇文章，发现同一个作者还写了另一篇文章：“7 Reasons NOT to use a Content Delivery Network”。

那么这个CDN，到底我们用还是不用呢？我读了一下这两篇文章，在这里翻译总结一下：

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

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

看完了作者的上面两篇文章，我基本对CDN的好与不好有了初步的认识，接着我又看到作者写了第三篇文章：“Should You Use a Content Delivery Network?”那我们到底该不该用CDN呢？

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

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

2. CDN对低流量的小网站性能提升并不明显，如果没有需要高带宽的视频、音频文件，把你的文件放在一起可能还更简单。

3. 对流量高的网站，CDN可以大大提升性能，但假如你的用户以移动设备为主，可能自己优化过的小文件比CDN上的大文件要下载和执行的更快。

4. 在实际中通过JavaScript搜集用户分别使用CDN文件和本地服务器文件时加载页面的速度，以决定一段时间内是选择CDN还是本地文件。

5. 对于重要的文件，最好还是提供本地文件的冗余，以应对CDN文件不可用的情况。以jquery为例：

   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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方法内的“</script>”当成了结束标签。

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

看到这里，我想你也觉得CDN是好的，只是要把它用好，还是应该遵循前面讲到的一些原则，简单的说，在实践中，一些流行的库文件和字体文件使用CDN是好的，对于大型网站来说，使用私有CDN也能极大提升速度和降低成本，但如果你的应用对安全、隐私和可靠性要求较高，那就要在CDN的性能提升和安全考量之间做一下权衡了。

参考资料

1. bootstrap 用来构建大型互联网网站前端布局可行性如何？
2. JavaScript DOM 编程艺术 第2版
3. 7 Reasons to use a Content Delivery Network
4. 使用CDN的7个理由
5. 7 Reasons NOT to use a Content Delivery Network
6. Should You Use a Content Delivery Network?
7. CDN是什么？使用CDN有什么优势？

如果觉得这篇文章帮到了你，可以用支付宝或者微信捐赠一下哦~谢谢