使用CDN和AJAX加速WordPress中jQuery的載入_jquery

確定要放在Head部分 ?

事實上最好的情況是，js檔案都不要在

部分進行加載，否則會影響到head部分的載入速度，直接導致網站的內容（body）載入延遲。如果你確定你不需要在head部分載入jQuery，請將載入程式碼移到前，準確的說是第一個會用到jQuery函數的javascript程式碼前。

當然，如果你需要head部分加載jquery，也請確保所有的js文件，包括jquery，都要放在調用CSS文件的程式碼之後，來實現同步下載。這也是Google官方給的建議。例如下面的載入不建議：

<script src=jquery.js></script>

<link href="style.css" .../>

而是應該使用:

<link href="style.css" .../>

<script src=jquery.js></script>

確定不要非同步載入 ?

非同步載入不會阻塞網頁的載入，而非非同步載入則會在載入本身js之前短暫阻塞瀏覽器的網頁載入。這可能影響瀏覽體驗。

如果你的載入程式碼是

<script type="text/javascript" src="jquery.js"></script>

那你需要知道這可不是非同步載入的方式，這是一種同步載入。如果你不需要在頁面載入後及時的呼叫jquery函數，你完全可以用非同步載入的方式，使得網頁onload之前才載入jquery，大大加快載入速度。這樣的程式碼看起來像是Google Analytics的程式碼。

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

但是經我觀察，大多數的時候我們需要同步加載，尤其是你還需要引入jQuery插件的時候。

使用哪個版本的jQuery ?

wordpress總是自備最新的jQuery函式庫，每個版本的使用方法總有細微的不同。越新的jQuery版本，效能提升也越高。不過，某些jquery插件可能不太相容太新的插件，而它自己也沒有推出更新。也許有些你會使用的方法函數，到了新版本發現已經被改變，曾經能工作的現在已經不能了。對於這種情況，應該遵從這樣的原則，那就是在確保相容性的同時，做到使用盡可能新的jQuery函式庫。

例如你以前使用1.6.2版本的jquery，到了現在你發現2.X某些函數有改變，你又不願意去變更程式碼，就最好逐個調試，例如你發現1.7.2的兼容性就不錯。這時候就可以拋棄1.6.2，可以用1.7.2版本的jQuery去替換掉2.X的新版。

使用哪個jQuery CDN庫 ?

jQuery實在是太大了！如果你的網站速度不是飛快，jquery肯定會影響到你的頁面載入速度。還好百度、新浪、微軟、Google等公司都推出了公共js函式庫，方便網站主呼叫來縮短下載時間，而它們本身有著超快的CDN伺服器，節省了下載時間。

目前用的比較普遍的是Google提供的jquery庫：

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

當然，百度在國內的訪問速度是不可小視的：

<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

新浪的CDN同樣速度快速：

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

不跟風，也可以選擇微軟的jquery CDN：

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

你可以直接改變上面出現的版本號碼來選擇不同的版本。哪一個最快呢？如何選擇呢？

如果你的網站訪客來自海外的不少，建議選用Google，如果主要訪客是國內，選擇百度也沒問題。但是百度在海外的訪問速度可不及Google。

而且因為大多數的網站選擇了Google的CDN，由於快取原理，來訪你的網站，可能google的CDN更快。

如果你不是確定自己的網站下載速度飛快，我建議最好選用上述的公開CDN來節省載入時間，同時也節省了流量。

真的要用jQuery嗎？

如果你的網站只是需要用帶jquery一個很小的函數，為什麼要下載這麼大的檔案呢？為什麼不可以jquery-free？

例如你可以考慮zepto.js，其設計目標「以最小的體積，做到最大相容jQuery的API」。它在gzip壓縮後僅為10KB。

另外，jQuery有著模組設計，可以選擇自己只是需要的模組。你可以參考jquery builder。

載入jQuery的正確方式

說了那麼多，加載jquery的正確方式是什麼？

首先選好哪個CDN，或者你自己的網站託管js文件，並確定調用的位置在頭部還是body，下面以Google的jquery庫為例，普通的加載方式是

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

然而Google的服務在國內間歇性中斷，所以我可以照顧一下國內訪客，這麼寫：

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

這樣子即可實現如果jQuery未能載入成功，則自動載入百度的jquery函式庫，做到萬無一失了。