jquery效能優化進階技巧_jquery

有時候我們在書寫jquery的時候，為了書寫程式碼方便，往往忽略了程式執行過程中，給客戶端帶來的壓力。隨之而來的就是在某些低階瀏覽器或低階電腦上運行速度緩慢，甚至無法運行等問題。

因此我們有必要對我們自己書寫的jquery程式碼進行最佳化，以達到更快捷、更流暢的運行效果。

jquery效能最佳化進階技巧，以下主要從七個面向對jquery效能最佳化做介紹：

1.透過CDN（Content Delivery Network）引入jQuery庫

2.減少DOM操作

3.適當使用原生JS

4.選擇器最佳化

5.快取jQuery物件

6.定義一個可以重複使用的函數

7.用陣列方式來遍歷jQuery 物件集合

以下詳解每個方法的具體說明:

透過CDN（Content Delivery Network）引入jQuery庫

 要提升網站中javascript的性能的最簡單的一步就是引入最新版本的jQuery庫，新發布的版本通常在性能上會有更好的提升而且也修復了一下bug。或者透過CDN引入也是很好的選擇,透過CDN引入能夠減少網站的載入時間。

以下是一些CDN服務：

<!-- 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="//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="//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>

國內的一些CDN服務：

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操作還是很耗費資源的，需要減少對DOM操作。當在一個頁面中插入大量的元素的時候，尤其重要。

例如：

<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('' ));

將所有的元素快取起來一次插入效能上會有所提升，因為只觸發頁面一次重繪。對於CSS樣式屬性也是同樣的道理。

更多閱讀： 前端頁面卡頓？可能是DOM操作惹的禍，你需要優化程式碼

適當使用原生JS

建立jQuery物件會帶來一些開銷。所以，如果比較注重效能的話，盡可能使用原生的javascript。在某些方面可能會更容易理解和寫更少的程式碼。例如：

// 打印list中的li的id
$('#colors li' ). each(function(){
//将$(this).attr('id')方法替换为直接通过ID属性访问
console. log(this. id);
})

選擇器最佳化

如果你需要更好的效能，但還是要用到jQuery，你可以在jQuery選擇器優化做一些嘗試。以下是一個測試程序，透過瀏覽器的控制台console.time 和console.timeEnd 方法來記錄不同選擇器執行時間。

HTML:

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

//测试程序
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: 一些浏览器会比较快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
  // 通过后代Class选择器
  $('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式 
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
  // 直接通过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');

執行結果：

快取jQuery物件

每次透過選擇器建立新的jQuery物件時，jQuery的核心部分的Sizzle引擎會遍歷DOM然後透過對應的選擇器來匹配真正的dom元素。這種方式比較低效，在現代瀏覽器中可以透過document.querySelector方法透過傳入對應的Class參數來匹配對應的元素，不過IE8以下版本不支援此方法。一個提高效能的實踐是透過變數緩存jQuery物件。例如：

<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();

定義一個可以重複使用的函數

直接上例：

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

JS：

//Bad: 
//这个会导致多个回调函数的副本占用内存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);

如果定義一個內聯(inline)回呼函數同時這個包含多個元素的jQuery物件（如上面所說的第一個例子），對於這個集合中的每個元素都會在記憶體中保存一個回呼函數的副本。

用陣列方式來遍歷jQuery 物件集合

你或許沒有註意到，但是在效能方面，對於jQuery each方法這種優雅實作是有代價的。有一個辦法能夠更快地遍歷一個jQuery物件。就是透過數組來實現，jQuery物件集合就是一個類別數組，具有length和value屬性。可以透過程式來測試一下效能：

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实现：  
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实现：  
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
  arr.each(function(i, val) {
    this;
  });
}
console.timeEnd('jQuery Each');

結果：

可以看到透過數組實現方式遍歷，執行效率更高。

//------------------------------------------------ -------持續更新...

以上是一些蒐集知識的總結，如有任何建議或疑問，歡迎留言討論。