推荐使用CDN公共库加速你的JS和CSS

2017年3月30日 建站技术 浏览 3,719 抢沙发 A+

推荐使用CDN公共库加速你的JS和CSS

通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问、节省服务器流量、提升你的网站用户体验。本文将介绍国内比较常用的几种免费的CDN库,包括百度、新浪、360、又拍和七牛等。

百度CDN公共库

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。·

新浪SAE

SAE的public resource加速服务,我们对常用js/css库在全国采用cdn加速,用户只在第一次访问时加载js库,以后就直接在本地缓存读了。

又拍云JS库

又拍云为您托管常用的JavaScript库,您可以在自己的网页上直接通过script标记引用这些资源。这样做不仅可以为您节省流量,还能通过我们的CDN加速,获得更快的访问速度。

七牛CDN

我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境。

360前端静态资源库

360前端静态资源库是由奇舞团支持并维护的开源项目免费CDN服务,支持HTTPS和HTTP/2,囊括上千个前端资源库和Google字体库。360静态资源库数据均同步于CDNJS。

CDNJS

CDNJS提供非常完整的 JavaScript 程式库,无论是热门或是冷门的一应俱全。若你觉得它们缺少哪些好用的函式库,也可以自行提交到网站里,通过审核后就 CDNJS 就会为你分流 js文件!这项服务是结合 CloudFlare、Pingdom 与 S3Stat的,稳定性与速度自然不在话下。CDNJS提供的 JavaScript Libraries 全部列在网站首页,使用者可以直接搜索。这些程式库都有标示版本编号、标签以及原维护网站链结。

Ps:CDNJS应该算是最完整的的JS库了。存储了大部分主流的 JS 库,甚至 CSS、image 和 swf,不过很多国内优秀开源库是没有的。很多国外前卫的Js库在CDNJS大都能找到。国内的速度虽然比不上其他的几个国内的CDN服务,但是相对来说 其实还可以。

Google Hosted Libraries

Google出品,必属精品了。虽然最近Google全线产品被墙了,连基本的Google搜索服务都无法使用了。但是谷歌的公共CDN公共库应该是 最强大的了,像其中的前卫的各种代码类库和Google Web Font 字体库,国内几大公共CDN服务几乎都不提供支持。

Microsoft ASP.net CDN

ASP.NET开发团队推出的一个新的微软Ajax CDN(Content Delivery Network,内容分发网络)服务,该服务提供了对AJAX库(包括jQuery 和 ASP.NET AJAX)的缓存支持。该服务是免费的,不需任何注册,可用于商业性或非商业性用途。

jsDelivr

MaxCDN是一家价格相对比较便宜的CDN公司,在全球分布着众多的节点。 jsDelivr是基于MaxCDN的一个免费开源的 CDN 解决方案,用于帮助开发者和站长。jsDelivr包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

Ps:每一款CDN的节点数量都是大家所关心的,jsDelivr总共提供着13个节点。加载速度和CDNJS基本差不多,国内用户建议使用国内CDN服务最佳。大家可以自己测试看看。

当你使用jQuery库时,如果上面的服务加载不了,那你可以加一个脚本判断一下,如果出错,则使用本地文件,代码如下:

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
(window.jQuery) || document.write('<script type="text/javascript" src="https://www.kimsom.com/wp-content/themes/begin/js/jquery.min.js"><\/script>'); //]]>
</script>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: