CDN——到底用还是不用?
最近在学bootstrap,在知乎上搜索bootstrap看到有人问bootstrap基础包体积较大,对性能影响会不会很大,看到两种方法来减少对性能的影响:
- 有选择地部分加载,bootstrap带有LESS和Sass版本,可以根据业务需求只加载需要用到的部分;bootstrap为不同的交互功能也提供了对应的js文件,不必直接加载bootstrap.min.js
- 使用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,到底我们用还是不用呢?我读了一下这两篇文章,在这里翻译总结一下:
用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、微软、亚马逊或者其他大的互联网公司时,你会考虑他们对你信息的搜集整理吗,这也许是多虑了,但是在互联网这一行里多一点这样的怀疑并不坏。
你到底要不要用CDN呢
看完了作者的上面两篇文章,我基本对CDN的好与不好有了初步的认识,接着我又看到作者写了第三篇文章:“Should You Use a Content Delivery Network?”那我们到底该不该用CDN呢?
几种明确不该用CDN的情况:
- 你构建的是内部网络应用,不与外部Internet连接;
- 像银行系统这样的应用,安全和隐私是最优先考虑的,就要让所有源文件和服务器位置完全处于自己掌控中;
- 你为公司或者国家开发的应用,而他们恰好对某些CDN的域名或者IP地址限制访问。
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
方法内的“</script>
”当成了结束标签。- 一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN,因为即使CDN文件不可用,网站也能做到平稳退化。
总结
看到这里,我想你也觉得CDN是好的,只是要把它用好,还是应该遵循前面讲到的一些原则,简单的说,在实践中,一些流行的库文件和字体文件使用CDN是好的,对于大型网站来说,使用私有CDN也能极大提升速度和降低成本,但如果你的应用对安全、隐私和可靠性要求较高,那就要在CDN的性能提升和安全考量之间做一下权衡了。
参考资料
- bootstrap 用来构建大型互联网网站前端布局可行性如何?
- JavaScript DOM 编程艺术 第2版
- 7 Reasons to use a Content Delivery Network
- 使用CDN的7个理由
- 7 Reasons NOT to use a Content Delivery Network
- Should You Use a Content Delivery Network?
- CDN是什么?使用CDN有什么优势?
CDN——到底用还是不用?的更多相关文章
- (转)CDN——到底用还是不用?
用CDN的七个理由 浏览器从服务器上下载css.js和图片等文件时都要和服务器连接,而大部分浏览器对同一个域名用于下载文件的并发连接数限制在4个,这意味着如果要下载第五个文件就必须等前四个文件中有一个 ...
- 我们常说的CDN到底是什么?
程序员每天提及的无数词当中,有一个是「CDN」,Ta的中文名是「内容分发网络」,读中文是令人蒙逼的,英文名是Content Delivery Network. CDN有啥用呢?它主要用来解决什么问题呢 ...
- 《CDN技术详解》 - CDN知多少?
开发时间久了,就会接触到性能和并发方面的问题,如果说,在自己还是菜鸟的时候完全不用理会这种问题或者说有其他的高手去处理这类问题,那么,随着经验的丰富起来,自己必须要独立去处理了.或者,知道思路也行,毕 ...
- CDN,你了解多少?
大家对CDN并不陌生,工作中或多或少都有所接触,最近也有人问到,在此对CDN相关概念和流程做下总结,希望还能对其他朋友也有所帮助. 一.什么是CDN 维基百科上是这样定义的: CDN:内容分发网络(C ...
- 浅谈CDN、SEO、XSS、CSRF
CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN. CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时候是在找JS文件时.当时找不到相对 ...
- CDN理解<转>
CDN则是更高级的手段.CDN到底如何工作的呢,让我们来大概了解一下! CDN的基础百科资料也很多了,我也稍等提一下.CDN,Content Distribute Network,即:内容分发网络. ...
- CDN加速-内容分发网络
内容分发网络 (互联网技术) 编辑 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输 ...
- 聪明的Azure CDN,帮你找到云端捷径
你知道吗?身处上海和纽约的两个用户同时通过网络收看“春晚”直播,纽约播放得可能比上海还要更流畅,这当然不是因为纽约距离北京的直播机房更近或者网速更快,而是因为大年夜在大洋彼岸围观“春晚”的观众相对较少 ...
- web编程
展示层 html/css/javascript/jquery/jquery easyUI/ajax bootstrap web层 varnish/haproxy/squid----lvs/keepal ...
随机推荐
- 单点登录(SSO)系统的总结
前些天一位其他开发部门的同事找到我们了解一些关于SSO单点登录的事,他们要做单点登录,同时也需要和我们这边的系统做集成,要我帮忙做一单点登录,了解关于单点登录的解决方案和资料,虽然做单点登录已经很久了 ...
- php Hash Table(一) Hash Table的结构
关于Hash Table专题: 一直想深入理解一下php的hash table的实现,以前一直是星星点点的看看,从未彻底的总结过,那就从这个专题开始吧! 主要想总结几个部分:hashtable结构,h ...
- coreos安装
cloud-config-bootstrap.sh #!/bin/bash cat > "cloud-config.yaml" <<EOF #cloud-conf ...
- Tomcat编码问题及访问软链接文件设置
Tomcat编码问题及访问软链接文件设置 一.编码问题:让其支持UTF-8格式 修改tomcat中server.xml Connector port=" protocol="org ...
- 求1到n的阶乘
#include<stdio.h> int main() { int data; ; scanf("%d",&data); ){ int j; ;j<=d ...
- css1-css3的那些模糊点
css很重要, 但也不是万能的, 也不能抛弃dom 元素和 元素的属性!! 很多时候, dom "元素" 的 "属性" 也很重要 也很实用! 要结合属性来写 包 ...
- vim 树形目录插件NERDTree安装及简单用法
转自: http://blog.csdn.net/love__coder/article/details/6659103 1,安装NERDTree插件 先下载,官网:http://www.vim.or ...
- 深入理解计算机系统-从书中看到了异或交换ab两个值的新感
还得从一个很经典的面试题说起:不通过第三个变量来交换两个变量a,b的值... 一个很经典的答案是通过异或来解决: 第壹步:a=a^b; 第贰步:b=a^b; 第叁步:a=a^b; 以前提起" ...
- LYDSY模拟赛day9 2048
/* 大模拟题,做的时候思路还是比较清晰的 */ #include<iostream> #include<cstdio> #include<string> #inc ...
- css固定元素位置(fixed)
来源:http://www.cnblogs.com/lecaf/archive/2011/03/25/fixed.html fixed是一种特殊的absolute,同样不占文档流,特殊的地方在于fix ...