欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2015年12月05日 10:45:07   投稿：goldensun  
這篇文章主要介紹了使用CDN和AJAX加速WordPress中jQuery的加載的方法,注意一下WordPress中以及CDN的Google連接在內(nèi)地的網(wǎng)絡(luò)問(wèn)題,需要的朋友可以參考下

確定要放在Head部分 ?

事實(shí)上最好的情況是，js文件都不要在<head>部分進(jìn)行加載，否則會(huì)影響到head部分的載入速度，直接導(dǎo)致網(wǎng)站的內(nèi)容（body）載入延遲。如果你確定你不需要在head部分載入jQuery，請(qǐng)將載入代碼移動(dòng)到</body>前，準(zhǔn)確的說(shuō)是第一個(gè)會(huì)用到j(luò)Query函數(shù)的javascript代碼前。

當(dāng)然，如果你需要head部分加載jquery，也請(qǐng)確保所有的js文件，包括jquery，都要放在調(diào)用CSS文件的代碼之后，來(lái)實(shí)現(xiàn)同步下載。這也是Google官方給出的建議。例如下面的加載不推薦：

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

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

而是應(yīng)該使用:

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

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

確定不要異步加載 ?

異步加載不會(huì)阻塞網(wǎng)頁(yè)的載入，而非異步加載則會(huì)在加載本身js之前短暫阻塞瀏覽器的網(wǎng)頁(yè)載入。這可能影響瀏覽體驗(yàn)。

如果你的加載代碼是

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

那么你需要知道這可不是異步加載的方式，這是一種同步加載。如果你不需要在頁(yè)面加載后及時(shí)的調(diào)用jquery函數(shù)，你完全可以用異步加載的方式，使得網(wǎng)頁(yè)onload之前才加載jquery，大大加快載入速度。這樣的代碼看起來(lái)像是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);

但是經(jīng)我觀察，大多數(shù)的時(shí)候我們需要同步加載，尤其是你還需要引入jQuery插件的時(shí)候。

使用哪個(gè)版本的jQuery ?

wordpress總是自帶最新的jQuery庫(kù)，每一個(gè)版本的使用方法總有細(xì)微的不同。越新的jQuery版本，性能提升也越高。不過(guò)，某些jquery插件可能不太兼容太新的插件，而它自己也沒(méi)有推出更新。也許有些你會(huì)使用的方法函數(shù)，到了新版本發(fā)現(xiàn)已經(jīng)被改變，曾經(jīng)能工作的現(xiàn)在已經(jīng)不能了。對(duì)于這種情況，應(yīng)該遵從這樣的原則，那就是在確保兼容性的同時(shí)，做到使用盡可能新的jQuery庫(kù)。

例如你以前使用1.6.2版本的jquery，到了現(xiàn)在你發(fā)現(xiàn)2.X某些函數(shù)有改變，你又不愿意去變更代碼，就最好逐個(gè)調(diào)試，例如你發(fā)現(xiàn)1.7.2的兼容性就不錯(cuò)。這個(gè)時(shí)候就可以拋棄1.6.2，可以用1.7.2版本的jQuery去替換掉2.X的新版。

使用哪個(gè)jQuery CDN庫(kù) ?

jQuery實(shí)在是太大了！如果你的網(wǎng)站速度不是飛快，jquery肯定會(huì)影響到你的頁(yè)面加載速度。好在百度、新浪、微軟、Google等公司都推出了公共js庫(kù)，方便網(wǎng)站主調(diào)用來(lái)縮短下載時(shí)間，而它們本身有著超快的CDN服務(wù)器，節(jié)約了下載時(shí)間。

目前用的比較普遍的是Google提供的jquery庫(kù)：

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

當(dāng)然，百度在國(guó)內(nèi)的訪問(wèn)速度是不可小視的：

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

新浪的CDN同樣速度飛快：

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

不跟風(fēng)，你也可以選擇微軟的jquery CDN：

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

你可以直接更改上面出現(xiàn)的版本號(hào)來(lái)選擇不同的版本。哪一個(gè)最快呢？如何選擇呢？

如果你的網(wǎng)站訪客來(lái)自海外的不少，建議選用Google，如果主要訪客是國(guó)內(nèi)，選擇百度也沒(méi)問(wèn)題。但是百度在海外的訪問(wèn)速度可不及Google。

而且因?yàn)榇蠖鄶?shù)的網(wǎng)站選擇了Google的CDN，由于緩存原理，來(lái)訪你的網(wǎng)站，可能google的CDN更快。

如果你不是確定自己的網(wǎng)站下載速度飛快，我建議最好選用上述的公開(kāi)CDN來(lái)節(jié)省加載時(shí)間，同時(shí)也節(jié)省了流量。

真的要用jQuery嗎？

如果你的網(wǎng)站只是需要用帶jquery一個(gè)很小的函數(shù)，為什么要下載這么大的文件呢？為什么不可以jquery-free？

例如你可以考慮zepto.js，其設(shè)計(jì)目標(biāo)“以最小的體積，做到最大兼容jQuery的API”。它在gzip壓縮后僅僅為10KB。

另外，jQuery有著模塊設(shè)計(jì)，可以選擇自己只是需要的模塊。你可以參考jquery builder。

加載jQuery的正確方式

說(shuō)了那么多，加載jquery的正確方式是什么？

首先選好哪個(gè)CDN，或者你自己的網(wǎng)站托管js文件，并確定調(diào)用的位置在頭部還是body，下面以Google的jquery庫(kù)為例，普通的加載方式是

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

然而Google的服務(wù)在國(guó)內(nèi)間歇性中斷，所以我可以照顧一下國(guó)內(nèi)訪客，這么寫(xiě)：

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

<script type="text/javascript">

window.jQuery || document.write(unescape('%3Cscript%20type%3D%22text/javascript%22%20src%3D%22//libs.baidu.com/jquery/2.0.3/jquery.min.js%22%3E%3C/script%3E'));

</script>

這樣子即可實(shí)現(xiàn)如果jQuery未能加載成功，則自動(dòng)加載百度的jquery庫(kù)，做到萬(wàn)無(wú)一失了。

相關(guān)文章

最新評(píng)論