- N +

聊聊前端CDN公共库的使用心得

原标题:聊聊前端CDN公共库的使用心得

导读:

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

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

CDN公共库.jpg

什么是CDN公共库?

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

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

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

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

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

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

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

替换成

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

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

对了,这么说下什么是相对地址,比如这个就是相对地址:

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

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

CDN公共库.jpg

介绍两个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 读取失败的时候从自己服务器提供:

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

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

有好的文章希望李洋博客帮助分享和推广,猛戳这里我要投稿

3

0
返回列表
上一篇:

发表评论中国互联网举报中心

快捷回复:

    评论列表 (已有6条评论,共198人参与)参与讨论
    网友昵称:聚实惠
    聚实惠游客4天前回复
    学习一下,应该后面会用到
    网友昵称:非李莫属
    非李莫属管理员4天前回复
    @聚实惠 嗯嗯,后期会用到的,收藏吧!
    网友昵称:小白
    小白游客5天前回复
    谢谢分享
    网友昵称:非李莫属
    非李莫属管理员4天前回复
    @小白 不客气的!
    网友昵称:阿桂屋
    阿桂屋游客1周前 (11-08)回复
    来见识一下学点技术还是不错的
    网友昵称:非李莫属
    非李莫属管理员1周前 (11-09)回复
    @阿桂屋 谢谢支持!