选择合适的jQuery加载源,加速你的网站

目前大量的网站都使用了jQuery来实现各种特效,wordpress也在2.8版本引入了jQuery库。不过随着jQuery的不断发展,文件是越来越大了,烙印现在使用的jquery.min.1.4.4.js文件已经达到76K之巨。对于我们广大的独立博客来说,因为网络环境的因素,很多朋友都安家国外,所以从空间加载这东西压力很大。并且流量对于和我一样使用虚拟主机的童鞋来说,是相当宝贵的。

所以,为了节约流量,为了给访客更好的体验,我们必须选择一个快速的jQuery加载源。

目前最佳的选择就是使用 google和微软提供的cdn jQuery源。

Google Ajax API CDN

http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

Google Ajax CDN Documentation

Microsoft CDN

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js

Ajax CDN Announcement, Microsoft Ajax CDN Documentation

此外,使用Google jQuery 的CDN方法用起来也很简单,直接在网页里引用Google服务器上的相关js文件就可以了。不过,如果引用多个js,就要插入多段的script。 Google也提供了相应的办法,那就是google load。我们只需要在页面里引用一个js文件,就可以根据需要实时加载用到的js库了。

首先在页头部分加入以下这行代码:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

加载jQuery,可以这样使用:
google.load("jquery","1.3.2");

这样我们就从Google的最近的CDN镜像上加载了jQuery 1.3.2版的js库,接下来就可以正常写js代码了。不过,即使是Google的CDN镜像,下载也毕竟是需要时间的,万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办?我们可以设定在js库加载完以后才开始执行js:

google.setOnLoadCallback(function(){//要执行的代码});

更多有关google jsapi的相关介绍和文档,可以参考:google AJAX 库 API

当然我们还有其他的类库可以加载

在google 类库 http://code.google.com/intl/zh-CN/apis/libraries/devguide.html

有各种各样的CDN 比如EXT Core、jQuery UI 、Dojo等等。

 

虽然 CDN jQuery 源相当的稳定,不过我们也不能保证其能随时访问,万一景德镇一激动,我们不就蛋疼了,所以我们还要给它另外一个选择,让它根据条件加载 jquery,加一个备用源。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
<!-- 
!window.jQuery && document.write('<script src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js><\/script>'); 
//--> 
</script>

其中第二个地址可以换成你本地的 jQuery 以保证链接稳定性。这样的意义是:先去加载谷歌的jquery库文件,如果加载失败那么就加载微软的 jquery 库文件。如果加载 google jquery 成功则会忽略后面的微软 jQuery 代码。

为了测试代码是否能正常运行,我将http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js改为了

http://ajax.googleapis.com/ajax/libs/jquery/1.4.4333/jquery.min.js以便让其加载失败。

下图为加载失败数据:

截图--2011-04-29_024909(0021)

正在加载成功的数据:

截图--2011-04-29_024808(0022)

代码能成功运行,这样我们就不用担心一个源挂了之后网站无法加载特效及某些功能的问题了。

 

本文参考:cychai的专栏浮云’s Blog

选择合适的jQuery加载源,加速你的网站》上有11个想法

  1. 之前在我本地(两个不同的地理位置)写了个脚本,对这些jQuery源逐个下载了十次,发现Microsoft源的总耗时要比Google的要少很多。你也可以试试。

发表回复