jquery性能優(yōu)化高級(jí)技巧

更新時(shí)間：2015年08月24日 10:06:49 作者：real_燎原之火

jquery性能優(yōu)化做好，速度也很快，那么如何提高jquery性能呢，本篇文章給大家介紹jquery性能優(yōu)化高級(jí)技巧，需要的朋友可以參考下

有時(shí)候我們?cè)跁?shū)寫(xiě)jquery的時(shí)候，為了書(shū)寫(xiě)代碼方便，往往忽略了程序執(zhí)行過(guò)程中，給客戶端帶來(lái)的壓力。隨之而來(lái)的就是在某些低端瀏覽器或者低端電腦上運(yùn)行速度緩慢，甚至無(wú)法運(yùn)行等問(wèn)題。

因此我們有必要對(duì)我們自己書(shū)寫(xiě)的jquery代碼進(jìn)行優(yōu)化，以達(dá)到更快捷、更流暢的運(yùn)行效果。

jquery性能優(yōu)化高級(jí)技巧，下面主要從七個(gè)方面對(duì)jquery性能優(yōu)化做介紹：

1.通過(guò)CDN（Content Delivery Network）引入jQuery庫(kù)

2.減少DOM操作

3.適當(dāng)使用原生JS

4.選擇器優(yōu)化

5.緩存jQuery對(duì)象

6.定義一個(gè)可以復(fù)用的函數(shù)

7.用數(shù)組方式來(lái)遍歷jQuery 對(duì)象集合

下面詳解每一個(gè)方法的具體說(shuō)明:

通過(guò)CDN（Content Delivery Network）引入jQuery庫(kù)

要提升網(wǎng)站中javascript的性能的最簡(jiǎn)單的一步就是引入最新版本的jQuery庫(kù)，新發(fā)布的版本通常在性能上會(huì)有更好的提升而且也修復(fù)了一下bug?；蛘咄ㄟ^(guò)CDN引入也是很好的選擇,通過(guò)CDN引入能夠減少網(wǎng)站的加載時(shí)間。

以下是一些CDN服務(wù)：

<!-- Case 1 - jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script>
<!-- Case 4 - requesting the absolute latest jQuery version (use with caution) -->
<script src="http://code.jquery.com/jquery.min.js" ></script>

一些國(guó)內(nèi)的CDN服務(wù)：

http://www.bootcdn.cn/jquery/
<!--新浪 CDN-->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--百度 CDN-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--Bootstrap CDN-->
http://www.bootcdn.cn/jquery/

減少DOM操作

雖然javascript性能上有了很大的提升，但是DOM操作還是很耗費(fèi)資源的，需要減少對(duì)DOM操作。當(dāng)在一個(gè)頁(yè)面中插入大量的元素的時(shí)候，尤其重要。

例如：

<div id="elem" ></div>

// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = 0; i < 100; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));

將所有的元素緩存起來(lái)一次插入性能上會(huì)有所提升，因?yàn)橹挥|發(fā)頁(yè)面一次重繪。對(duì)于CSS樣式屬性也是同樣的道理。

更多閱讀：前端頁(yè)面卡頓？可能是DOM操作惹的禍，你需要優(yōu)化代碼

適當(dāng)使用原生JS

創(chuàng)建jQuery對(duì)象會(huì)帶來(lái)一些開(kāi)銷。所以，如果比較注重性能的話，盡可能使用原生的javascript。在某些方面可能會(huì)更容易理解和寫(xiě)更少的代碼。例如：

// 打印list中的li的id
$('#colors li' ). each(function(){
//將$(this).attr('id')方法替換為直接通過(guò)ID屬性訪問(wèn)
console. log(this. id);
})

選擇器優(yōu)化

如果你需要更好的性能，但是仍然要用到j(luò)Query，你可以在jQuery選擇器優(yōu)化做一些嘗試。以下是一個(gè)測(cè)試程序，通過(guò)瀏覽器的控制臺(tái)console.time 和console.timeEnd 方法來(lái)記錄不同選擇器執(zhí)行時(shí)間。

HTML:

<div id="peanutButter" >
<div id="jelly" class=".jellyTime" ></div>
</div>
JS:

//測(cè)試程序
var iterations = 10000,
  i;
//--------------------------------------------
//Case 1: 很慢
console.time('Fancy');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div:first');
}
console.timeEnd('Fancy');
//--------------------------------------------
//Case 2: 比較好，但仍然很慢
console.time('Parent-child');
for (i = 0; i < iterations; i++) {
  $('#peanutButter div');
}
console.timeEnd('Parent-child');
//--------------------------------------------
//Case 3: 一些瀏覽器會(huì)比較快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
  // 通過(guò)后代Class選擇器
  $('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式 
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
  // 直接通過(guò)Class選擇器
  $('.jellyTime');
}
console.timeEnd('By class name');
//--------------------------------------------
//Case 5: 推薦的方式 ID選擇器
console.time('By id');
for (i = 0; i < iterations; i++) {
  $('#jelly');
}
console.timeEnd('By id');

執(zhí)行結(jié)果：

緩存jQuery對(duì)象

每次通過(guò)選擇器構(gòu)建一個(gè)新的jQuery對(duì)象時(shí)，jQuery的核心部分的Sizzle引擎會(huì)遍歷DOM然后通過(guò)對(duì)應(yīng)的選擇器來(lái)匹配真正的dom元素。這種方式比較低效，在現(xiàn)代瀏覽器中可以通過(guò)document.querySelector方法通過(guò)傳入對(duì)應(yīng)的Class參數(shù)來(lái)匹配對(duì)應(yīng)的元素，不過(guò)IE8以下版本不支持此方法。一個(gè)提高性能的實(shí)踐是通過(guò)變量緩存jQuery對(duì)象。例如：

<ul id="pancakes" >
     <li>first</li>
     <li>second</li>
     <li>third</li>
     <li>fourth</li>
     <li>fifth</li>
</ul>

JS：

// 不好的方式:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// ------------------------------------
// 推薦的方式:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// ------------------------------------
// 或者:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();

定義一個(gè)可以復(fù)用的函數(shù)

直接上例子：

HTML：
<button id="menuButton" >Show Menu!</button>
<a href="#" id="menuLink" >Show Menu!</a>

JS：

//Bad: 
//這個(gè)會(huì)導(dǎo)致多個(gè)回調(diào)函數(shù)的副本占用內(nèi)存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);

如果定義一個(gè)內(nèi)聯(lián)(inline)回調(diào)函數(shù)同時(shí)這個(gè)包含多個(gè)元素的jQuery對(duì)象（正如上面所說(shuō)的第一個(gè)例子），對(duì)于這個(gè)集合中的每個(gè)元素都會(huì)在內(nèi)存中保存一個(gè)回調(diào)函數(shù)的副本。

用數(shù)組方式來(lái)遍歷jQuery 對(duì)象集合

你或許沒(méi)有注意到，但是在性能方面，對(duì)于jQuery each方法這種優(yōu)雅實(shí)現(xiàn)是有代價(jià)的。有一個(gè)辦法能夠更快地遍歷一個(gè)jQuery對(duì)象。就是通過(guò)數(shù)組來(lái)實(shí)現(xiàn)，jQuery對(duì)象集合就是一個(gè)類數(shù)組，具有l(wèi)ength和value屬性?？梢酝ㄟ^(guò)程序來(lái)測(cè)試一下性能：

HTML:

<ul id="testList" >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> 
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <!-- add 50 more -->
</ul>

JS:

var arr = $('li'),
  iterations = 100000;
//------------------------------
// Array實(shí)現(xiàn)：  
console.time('Native Loop');
for (var z = 0; z < iterations; z++) {
  var length = arr.length;
  for (var i = 0; i < length; i++) {
    arr[i];
  }
}
console.timeEnd('Native Loop');
//------------------------------
// each實(shí)現(xiàn)：  
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
  arr.each(function(i, val) {
    this;
  });
}
console.timeEnd('jQuery Each');

結(jié)果：