谈谈前端CDN公共库的好处推荐

摘要： 不知道大家有没有注意，有些网站服务器并不怎么好，但是网站打开的速度却是很快，很多人可能会奇怪是什么，我想其中有一点就是使用了CDN公共库，当然这里所说的公众库不一定是第三方的，有可...

不知道大家有没有注意，有些网站服务器并不怎么好，但是网站打开的速度却是很快，很多人可能会奇怪是什么，我想其中有一点就是使用了CDN公共库，当然这里所说的公众库不一定是第三方的，有可能是自己的CDN库，比如“对象存储COS资源包”还有阿里云的“对象存储 OSS”这些都属于CDN的公共库，今天不介绍这些怎么使用，只是介绍下第三方的CDN公众库。

什么是CDN公共库？

其实CDN公众库是指将常用的JS库存放在CDN节点，方便广大开发者直接调用。这跟我们放在服务器单机的JS相比，CDN公共库更加稳定、高速。

现在web应用都在使用JS类库，这些类库小的几十K，大的几百K，而国内网络访问速度大家都知道不是那么惬意，所以给各位开发者推荐常用JS类库的CDN缓存，这样不管客户在哪里访问你的页面，调用公共类库的速度都会为你的页面节省很多时间。

一般的CDN公共库都会包含全球所有最流行的开源JavaScript库，你可以在自己的网页上直接通过script标记引用这些资源。这样做不仅可以为您节省流量，还能通过CDN加速，获得更快的访问速度。要注意的是网站如果支持ssl必须调用https的资源否则网站会出错。相对来讲我们可以直接用相对的地址，这个一会会有说明。

说了这么多废话，究竟这么使用呢，步入正题：

首先你得确定你要用到的js或者cssCDN公众库要有才行，没有的话你只能自建了。拿本站对比，网站开启了font奥森图标和加载特效，当然这俩还是比较常见的，索性CDN公众库都有，那么我们就需要把现在的文件替换成CDN公众库的地址。

以本博客为例，找到模板目录下的“header.php”这个是公共头部文件，编辑，查找“font-awesome.min.css”把

 PHP

<link rel="stylesheet" href="{$host}zb_users/theme/{$theme}/style/font-awesome/css/font-awesome.min.css" media="screen" type="text/css" />

替换成

 PHP

<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

就可以了，仅仅是简单的举例，就是把CDN公众库有的资源，替换我们服务器上的资源就可以了。

对了，这么说下什么是相对地址，比如这个就是相对地址：

 PHP

<link href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

我们只需要取消前面的“https:”就行，这样在加载的时候，如果我们启用的https那么CDN公众库的资源也是https的，反之则是http的。

介绍两个CDN公众库吧：

新浪云计算CDN公共库

新浪云计算是新浪研发中心下属的部门，主要负责新浪在云计算领域的战略规划，技术研发和平台运营工作。主要产品包括 应用云平台Sina App Engine（简称SAE）。

SAE的CDN节点覆盖全国各大城市的多路（电信、联通、移动、教育）骨干网络，使开发者能够方便的使用高质量的CDN服务。

地址：http://lib.sinaapp.com

Ps：网上有评测说新浪的速度比百度的要好。个人没感觉出来。亲测半夜的时候出现过几次加载慢的情况（不知道其他站长遇到过没有）。

又拍云JS库CDN服务

又拍云存储是杭州纬聚网络有限公司旗下项目，成立于2005年6月，前期主要为又拍网、又拍图片管家提供图片云存储／云计算服务，于2010年2月对所有用户开放使用。

主要专注于海量小文件的存储与分发及图片云计算领域。提供的两大核心服务：静态文件云存储、CDN加速处理。

地址：http://jscdn.upai.com

Ps：又拍云js库提供了常用的JavaScript库CDN服务。算是起步较早的cdn加速服务了。速度和稳定性也不错。不过js库有点少，有些前卫的js库可能不提供。

七牛云存储 开放静态文件CDN

像 Google Ajax Library，Microsoft ASP.net CDN，SAE，Baidu，Upyun 等 CDN 上都免费提供的 JS 库的存储，但使用起来却都有些局限，因为他们只提供了部分 JS 库。但七牛云存储提供一个尽可能全面收录优秀开源库的仓库，并免费提供 CDN 加速服务。

地址：http://www.staticfile.org

GIT开源库：https://github.com/staticfile/static

Ps：同时，开放静态文件CDN也提供开源库源接入的入口，让所有人都可以提交开源库，包括 JS、CSS、image 和 swf 等静态文件。

BootCDN

BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。自2013年10月31日上线以来已经为50多万家网站提供了稳定、可靠的免费 CDN 加速服务。

地址：https://www.bootcdn.cn/

Ps：BootCDN 所加速的所有开源库绝大部分同步自 cdnjs 仓库，我们一般是每天都同步一次，也就是每次同步的时候才会更新 API 中提供的信息。

这些CDN公共库大都各具特色。大家可以自己选择性去使用。速度和稳定性以国内为最佳（不知道为什么百度CDN资源库关闭了）。

PS：用别人的 CDN 都是不保险的，所以建议在 CDN 读取失败的时候从自己服务器提供：

 PHP

<script type="text/javascript">!window.jQuery && document.write('<script src="/font-awesome/css/font-awesome.min.css"><\/script>');</script>

使用应该来说没什么难度，有兴趣的童鞋可以试试！