使用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