国内外前端静态资源库的CDN性能大比拼

网站建设 网络投稿 2022-02-09 05:38 1311 0


国内cdn常用js公共库地址:


百度开放平台 cdn

http://cdn.code.baidu.com/


新浪 cdn

http://lib.sinaapp.com/


又拍云免费JS库

http://jscdn.upai.com/


七牛云免费JS库

https://www.staticfile.org/


BootCDN开源项目加速服务:

http://www.bootcdn.cn/


360 前端静态资源库:

  https://cdn.baomitu.com


字节跳动静态资源公共库:

  http://cdn.bytedance.com


七牛云 CDN:

  http://www.staticfile.org






jQuery库CDN介绍:

        网页中我们经常使用jQuery库,选择使用的jQuery加载源,能有效加快网站的加载速度,目前推荐使用新浪、Google或Microsoft提供的CDN jQuery源,当然,他们还都提供了其他js库。  作为国内的网站来说当然首推新浪的公共资源服务(Public Resources),速度上更有优势。而且新浪提供了不少JS资源,具体可以去http://lib.sinaapp.com查看。  

Google Ajax API CDN地址是:

  https://developers.google.com/speed/libraries/devguide?hl=zh-CN  调用Jquery  http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js 

 Microsoft CDN地址是  http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js  

关于使用CDN调用js库的好处  

  1. 减少等待时间  CDN-Content Delivery Network(内容发布网络)的缩写,通过各种各样的服务途径把你的一些静态内容分散开来,当用户的浏览器提交这些文件的链接请求,他们便会自动下载网络上最近的可用的文件。因为这个原因:任何使用你服务的用户从谷歌下载JQuery库都将获得比从你自己的服务器上下载更快的速度。其实有很多的CDN服务可与谷歌的相比拟,但是他们很难超越谷歌的免费服务的优势,这个益处足以决定问题,但这仅仅是一部分。 

  2. 增加网页的同时载入速度  为了避免服务的过载,浏览器限制了同时连接的数目,依据不同的浏览器,这个限制可能是每个机房仅仅两个之少。  使用谷歌的AJAX内容服务网络来响应你的网站,使你本地服务器上更多服务可以同时进行,这和用户同时用6个浏览器浏览的效果没多大诧异,但是(那些不这么做的人)任然是运行一个浏览器,仅仅允许同时链接两个(链接数目到你的服务器上),这里的区别显而易见。 

  3. 更好的缓存  利用google的AJAX_lib内容发布服务的最大好处是你的用户根本不需要下载jQuery.不论你的缓存多么强大,如果你用自己的服务器提供jQuery,那么你的用户至少要下载一次它,某个用户很有可能在他们浏览器的缓存区里下载了许多完全相同的jQuery.min.js的拷贝版本,但是当他们第一次访问你的网站的时候,这些拷贝版本会被忽略。 

  4. 另一方面,当浏览器检测到同样版本的指向谷歌的链接,它就会知道这是下载同一个文件,不仅是谷歌的服务器会返回一个304(不需要修改文件的指令,即服务器上的文件未改动过)来回复一个重复的请求,而且会命令浏览器的缓存该文件长达一年的时间。  这意味着即使一些人访问了数百的使用谷歌服务的jQuery网站,他们只需要下载一次就够了。

  5. 百度百科上是这样介绍的:

      CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

  6. 优势:

  1. 不用担心自己网站访客,在任何时间,任何地点,任何网络运营商,都能快速打开网站。

  2. 各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少。

  3. 给网站直接带来的好处就是:流量,咨询量,客户量,成单量,都会得到大幅度提升。

国内的CDN:

  1. 百度

    src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"

  2. 七牛

    src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"

  3. 新浪

    src="http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js"

  4. 又拍云

    src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.0.min.js"

  5. 360

    src="http://libs.useso.com/js/jquery/2.0.0/jquery.min.js"

 

从图中可以看出国内最快的是七牛

国外的CDN:

  1.   要引用国外的谷歌和CDNJS的服务外,可惜的是国内用户加载起来比较慢,如果把自己网站架设在国外可以优先考虑使用。如果CDN加载失败时,我们需要加载自己本地的jQuery文件,只需要在头部加上下面的代码就可以

  2. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js" type="text/javascript"><\/script>')</script>


  3. 微软 cdn


  4. http://www.asp.net/ajax/cdn

  5. src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"



  1. Google Hosted Libraries


  2. https://developers.google.com/speed/libraries/devguide#jquery

  3. https://developers.google.com/speed/libraries/


        src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"


  1. CDNJS

    src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"


  2. jQuery官网

    src="http://code.jquery.com/jquery-1.11.0.min.js"

  3. jsDeliver

    src="http://cdn.jsdelivr.net/jquery/2.0.0/jquery-2.0.0.min.js"


        jsDeliver: 

        https://www.jsdelivr.com


        UNPKG:

        https://unpkg.com


从图中可以看出国外的CDN最快的是CDNjs

常用的jQuery库:


jQuery Migrate

jQuery版本迁移辅助插件,用jquery不同版本开发的程序在修改jquery版本出现的兼容问题可以使用jQuery Migrate解决此问题

jQuery官网CDN

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

jQuery

百度CDN

支持版本:2.0.3, 2.0.2, 2.0.1, 2.0.0,1.11.1, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

jQuery官方CDN

支持版本:2.1.1, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

微软CDN

支持版本:2.1.1, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>

jQueryUi

百度CDN

支持版本:1.10.2, 1.10.1, 1.10.0, 1.9.2, 1.9.1, 1.9.0, 1.8.24, 1.8.23, 1.8.22, 1.8.21, 1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16, 1.8.15, 1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4, 1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2
<script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>

jQuery官方CDN

支持版本:1.11.0,1.10.2, 1.10.1, 1.10.0, 1.9.2, 1.9.1, 1.9.0, 1.8.24, 1.8.23, 1.8.22, 1.8.21, 1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16, 1.8.15, 1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4, 1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

Highcharts

百度CDN

支持版本:2.3.5, 2.2.5
<script src="http://libs.baidu.com/highcharts/2.2.5/highcharts.js"></script>

jqMobi

百度CDN

支持版本:1.0.0
<script src="http://libs.baidu.com/jqmobi/1.0.0/jq.ui.min.js"></script>
 <script src="http://libs.baidu.com/jqmobi/1.0.0/jq.mobi.min.js"></script>

jQuerymobile

百度CDN

支持版本:1.3.0, 1.1.1, 1.0.1
<script src="http://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

Bootstrap

百度CDN

支持版本:2.0.4 ,2.0.3 ,2.0.2 ,2.1.1,2.2.1,2.3.1,2.3.2, 3.0.3
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

dojo

百度CDN

支持版本:1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.4, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.3, 1.2.0, 1.1.1
<script src="http://libs.baidu.com/dojo/1.8.0/dojo.js"></script>

ext-core

百度CDN

支持版本:3.1.0,3.0.0
<script src="http://libs.baidu.com/ext-core/3.1.0/ext-core.js"></script>

Highstock

百度CDN

支持版本:1.2.5
<script src="http://libs.baidu.com/highstock/1.2.5/highstock.js"></script>

JSON

百度CDN

支持版本:json2
<script src="http://libs.baidu.com/json/json2/json2.js"></script>

backbone

百度CDN

支持版本:0.9.2
<script src="http://libs.baidu.com/backbone/0.9.2/backbone-min.js"></script>

jQuery插件库CDN

支持版本:0.9.2
<script src="http://jq22com.qiniudn.com/backbone-min.js"></script>

lesscss

百度CDN

支持版本:1.3.0
<script src="http://libs.baidu.com/lesscss/1.3.0/less.min.js"></script>

mootools

百度CDN

支持版本:1.4.5, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.1.2, 1.1.1
<script src="http://libs.baidu.com/mootools/1.4.5/mootools-yui-compressed.js"></script>

QUnit

百度CDN

支持版本:1.4.0,1.5.0,1.6.0,1.7.0,1.8.0,1.9.0
<script src="http://libs.baidu.com/quint/1.9.0/qunit.js"></script>

Font Awesome

百度CDN

支持版本:1.4.0,1.5.0,1.6.0,1.7.0,1.8.0,1.9.0
<link href="//libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

underscore

百度CDN

支持版本:1.3.3
<script src="http://libs.baidu.com/underscore/1.3.3/underscore-min.js"></script>

swfobject

百度CDN

支持版本:2.1,2.2
<script src="http://libs.baidu.com/swfobject/2.2/swfobject.js"></script>

google字体

1、首先在程序源代码中找到调用Google免费字体库的地址,比如:
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext" rel="stylesheet">

google公共库

1、首先在程序源代码中找到调用Google前端公共库的地址,比如:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2"></script>