提高jquery效能的常用技巧簡單介紹

現在雖然硬體和網路各方面條件都進步很大，所以很多時候無需太在意程式碼的效能，只要能夠實現功能不行。

但是在面對複雜的功能的時候，效能還是非常重要的，下面就簡單介紹一下常見的提高jquery效能的方式。

一.使用最新版本的jQuery庫:

之所以要使用最新的版本是因為新版本肯定會比老版本的效能有所提高，否則升級版本將毫無意義。

不過也需要注意一下相容性問題。

二.選擇恰當的選擇器:

下面按照效能由強到弱簡單列舉一下選擇器:

（1）.id選擇器。

（2）.標籤選擇器。

（3）.class選擇器。

（4）.屬性選擇器。

（5）.偽類選擇器。

特別說明:

最好為選擇器指明context上下文，可以縮小定位元素的範圍，例如:

[JavaScript] 純文字檢視 複製程式碼
$('.class', context)

三.快取物件:

先看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('#antzone').css();
$('#antzone').bind('click',function(){});
$('#antzone').addClass();

上面的程式碼每次進行一次操作都要進行dom元素查詢，非常耗費效能，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var $antzone=$('#antzone',context);
$antzone.css();
$antzone.bind('click',function(){});
$antzone.addClass();

上面的程式碼只會進行一次DOM元素查詢，效能將會得到很大提高。

四.對dom元素進行迴圈操作:

操作dom元素是非常耗費效能的，所以要儘量減少對dom的操作次數。

先看一段程式碼:

[JavaScript] 純文字檢視 複製程式碼
var $list = $('#list');
for(var i = 0; i < 100; i++) {
  $list.append('<li>' + i + '</li>');
}

上面的程式碼需要進行100次追加操作，非常的耗費效能，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var $list = $('#list'),fragment = '';
for(var i = 0; i < 100; i++) {
  fragment += '<li>' + i + '</li>';
}
$list.append(fragment);

上面的程式碼只會進行一次追加操作，所以效能會得到很大提高。

五.使用for或者while替代each()方法:

使用jQuery選擇器獲取的是一個物件，如果進行遍歷的話可以使用each()方法。

不過建議使用for或者while語句替代，這能夠提高效能。