什么是CDN公共库?

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。一般的CDN公共库都会包含全球所有最流行的开源JavaScript库。

为什么要引用CDN公共库?

1.减少等待时间

CDN-Content Delivery Network(内容分发网络),通过各种各样的服务途径把你的一些静态内容分散开来,当用户的浏览器提交这些文件的链接请求,他们便会自动下载网络上最近的可用的文件。这样任何使用你的服务的用户从JS库下载都将获得比从你自己的服务器上下载更快的速度。

2.增加网页的同时载入速度

为了避免服务的过载,浏览器限制了同时连接的数目,依据不同的浏览器,这个限制可能是每个机房仅仅两个之少。
使用CDN公共库加载JS,使你本地服务器上更多服务可以同时进行。

3.更好的缓存

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

而当浏览器检测到同样版本的指向CDN公共库的链接,它就会知道这是下载同一个文件,不仅是CDN公共库的服务器会返回一个304(不需要修改文件的指令,即服务器上的文件未改动过)来回复一个重复的请求,而且会命令浏览器的缓存该文件长达一年的时间。

这意味着即使一些人访问了数百的使用CDN公共库的网站,他们只需要下载一次就够了。

目前有哪些CDN公共库?

最出名的莫过于Google CDN 的 jQuery 库,不过虽然其加载速度挺快,但由于众所周知的原因,不是特别稳定。

国内提供同样服务的有新浪SAE(http://lib.sinaapp.com)和百度BAE(http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs)。

其他公共库:https://developers.google.com/speed/libraries/devguide?hl=zh-CN#jquery

这些都是CDN加速过的JS库,全国加载速度都不差。

如何引用CDN公共库?

以百度为例,要加载jQuery,将如下所示的代码嵌入到你的网页中即可。

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

如果你想引用Google的CDN公共库,而又担心Google不稳定,那么将代码修改成下面这样就可以了:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">!window.jQuery && document.write('<SCRIPT src="jquery-1.8.2.min.js"></SCRIPT>');</script>

这段代码的意义是这样的:首先去加载谷歌的jquery库文件,如果加载失败,那么就直接加载自己服务器上的jquery库文件。

引用公共库之后,还需要禁止加载自带的jQuery.js,方法请见:WordPress禁止加载自带的jQuery.js的方法

文章链接:http://blog.gimhoy.com/archives/speed-up-your-website-js-libs.html

网站优化:引用CDN公共库的更多相关文章

  1. 国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  2. 盘点国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  3. 盘点国内网站常用的一些 CDN 公共库加速服务(转载)

    百度CND jQuery 地址:<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></scri ...

  4. 360网站卫士常用前端公共库CDN服务

    360网站卫士常用前端公共库CDN服务 360网站卫士常用前端公共库CDN服务

  5. 前端CDN公共库

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

  6. 国内CDN公共库

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一般的CDN公共库都会包含全球所有最流行的开源JavaScrip ...

  7. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  8. 前端CDN公共库整理

    转自: 灰狼博客, 地址: http://itlobo.com/articles/2016.html 现在web应用都在使用js类库,这些类库小的几十K,大的几百K,而国内网络访问速度大家都知道不是那 ...

  9. 百度CDN公共库

    百度CDN公共库 后续可以直接调用 地址:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs jQuery 加载地址: 未压 ...

随机推荐

  1. animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法

    $(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...

  2. AndroidStudio环境搭建

    简单记录一下AS的环境搭建过程,包括SVN的使用. 一.下载和安装JDK 地址:http://www.oracle.com/technetwork/java/javase/downloads/inde ...

  3. conda 虚拟环境

    一.jupyter notbook (1)需要安装: conda install ipykernel (2)首先激活对应的conda环境 source activate 环境名称 (3)将环境写入no ...

  4. Codeforces Beta Round #34 (Div. 2) E. Collisions

    E. Collisions time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  5. JAVA多线程提高四:多个线程之间共享数据的方式

    多个线程访问共享对象和数据的方式 如果每个线程执行的代码相同,可以使用同一个Runnable对象,这个Runnable对象中有那个共享数据,例如,买票系统就可以这么做. 如果每个线程执行的代码不同,这 ...

  6. Log-structured File Systems

    换到博客园排版有问题,原版在这里:http://xubenbenhit.github.io/LogStructureFileSystem.html Log-structured File System ...

  7. AES Java加密 C#解密 (128-ECB加密模式)

    在项目中遇到这么一个问题: java端需要把一些数据AES加密后传给C#端,找了好多资料,算是解决了,分享一下: import sun.misc.BASE64Decoder; import sun.m ...

  8. 巧妙利用JQuery和Servlet来实现跨域请求

    在网上看到很多的JQuery跨域请求的文章,比较有意思.这里我发表一个Servlet与JQuery配置实现跨域的代码,供大家参考.不足之处请指教 原理:JavaScript的Ajax不可以跨域,但是可 ...

  9. [oracle]centos 7 安装oracle

    换了好几个系统终于还是利用centos安装oralce成功了,这里我也参考了网上的好多资料以及oracle的官方文档 1.下载oracle,我这里选择的是11gr2版本,下载下来后有两个文件,利用un ...

  10. laravel 模糊查询

    模糊查询: Model::where('field_name','like','%'.$keywords.'%')->get() 转载:http://wenda.golaravel.com/qu ...