网站优化:引用CDN公共JS库

什么是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

时间: 2024-10-18 11:49:24

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

jQuery解决引用多个JavaScript库引起的$命名冲突的问题

在某些情况下,我们可能会在一个页面中使用多个JavaScript库,由于多个库中都是用$标识符,因此我们需要一种解决该命名冲突的方法,jQuery的noConflict()方法很好的解决了这个问题.jQuery调用该方法会把对$标识符的控制权限让渡给其他库使用. 参考示例如下: <script src="prototype.js"></script> <!-- 引用的库1 --> <script src="jquery.js"

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

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScript库,你可以在自己的网页上直接通过script标记引用这些资源.这样做不仅可以为您 节省流量,还能通过CDN加速,获得更快的访问速度. 为便于广大程序员的选择.使用,本文将网上的多篇文章合并为此文. 百度CDN公共库 百度公共CDN为站长的应用程序提供稳定.可靠.高速的服务,包含全球所有最流行的开

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

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScript库,你可以在自己的网页上直接通过script标记引用这些资源.这样做不仅可以为您 节省流量,还能通过CDN加速,获得更快的访问速度. 目前国内的一些比较大的公共CDN服务: 百度CDN公共库 百度公共CDN为站长的应用程序提供稳定.可靠.高速的服务,包含全球所有最流行的开源JavaScript库

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

http://www.cnbeta.com/articles/304469.htm 目前国内的一些比较大的公共CDN服务: 百度CDN公共库 百度公共CDN为站长的应用程序提供稳定.可靠.高速的服务,包含全球所有最流行的开源JavaScript库. 官网:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs Ps:百度的速度目前来说应该是和新浪差不多的.不过jQuery的版本比SAE少几个,其他类库应该都差不多. 新浪云计

前端CDN公共库

通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将js库存放在服务器单机上相比,CDN公共库更加稳定.高速. 百度公共CDN为您的应用程序提供稳定.可靠.高速的服务,包含全球所有最流行的开源javascript库. 新浪SAE SAE的public resource加速服

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

=======================================================================================前端CDN公共库====================================================================================== 为什么使用前端CDN公共库: 使用前端CDN增加网页的并行载入速度,减少本地服务器的负担,节省流量.我们把静态资源放到自己的服务器上面固

前端CDN公共库整理

转自: 灰狼博客, 地址: http://itlobo.com/articles/2016.html 现在web应用都在使用js类库,这些类库小的几十K,大的几百K,而国内网络访问速度大家都知道不是那么惬意,所以给各位开发者推荐常用JS类库的CDN缓存,这样不管客户在哪里访问你的页面,调用公共类库的速度都会为你的页面节省很多时间. 下面是常用JavaScript公共库CDN服务商列表:Google的js类库CDN发布页http://code.google.com/intl/zh-CN/apis/

百度 CDN公共库

http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs 简介 CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速. 百度公共CDN为您的应用程序提供稳定.可靠.高速的服务,包含全球所有最流行的开源JavaScript库. 资源列表 '使用方法:  加载JS库,复制HTML代码片段(如下所示)到网页.例如,要加载jQuery,将如下所示的代码嵌

原生aspx页面如何引用公共js和css

项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用户控件,直接在每个页面调用这个用户控件,通过不同的参数获取不同的引用文件,这种方式的好处就是大大减少了工作量,也规范了代码, 不会出现一个文件引用多次的情况了. 具体实现如下: 1.  新建一个用户控件:BundleConfig.ascx 2.前端调用,这里放到head里面.(注意:web.conf