使用CDN加载jQuery类库,加速你的网站

jQuery类库有大约25Kb(最小化并gzip压缩后),在用户的网速不是很理想的情况下,jQuery类库的载入速度不是很理想,我们需要从CDN网络加载jQuery,一是可以省一点带宽,二是可以给用户带来更快的页面加载体验。

25Kb x 100000 Unique PV =  2.5G流量,如果一个访问量更大的网站,这笔带宽占用会更高。

 

根据pingdom发布的权威调查报告http://royal.pingdom.com/2010/05/11/cdn-performance-downloading-jquery-from-google-microsoft-and-edgecast-cdns/ 显示,最快的CDN是edgecast,所以我们可以调用edgecast的jQuery.

下面的CDN来自于jQuery官方,我们直接用官方推荐的CDN!

  • jQuery CDN (Edgecast via (mt))
    • http://code.jquery.com/jquery-1.4.2.min.js Minified version
    • http://code.jquery.com/jquery-1.4.2.js Source version
    • Please do not link to versions of jQuery on static.jquery.com or dev.jquery.com; hotlinking to these subdomains will be disabled in Q3 of 2010 and your sites will break!
  • Google Ajax API CDN
    • http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
    • Google Ajax CDN Documentation
  • Microsoft CDN
    • http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.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

除了jQuery,Google还提供供了以下这些js框架/库的API:
jQuery UI
Prototype
script.aculo.us
MooTools

你可能感兴趣的:(使用CDN加载jQuery类库,加速你的网站)