提高jQuery執行效率的一些措施

本章節介紹一下在jQuery程式設計中需要注意的一些能夠提高效能的小細節，希望能夠給需要的朋友帶來幫助。

一.快取變數:

操作DOM是非常耗費資源的，如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
var H=$("#thediv").height();
$("#thediv").css("height",H-20);

以上程式碼中，每次操作都要重新獲取dom元素，非常耗費資源，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var $element=$("#thedi");
var H=$element.height();
$element.css("height",H-20);

以上程式碼可以講獲取的物件暫時儲存於一個變數，這樣就不用每次都去獲取了。

二.儘可能少使用全域性變數:

要儘可能的使用區域性變數，這樣在很多情況下可以節省很多資源，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function func(){
  $element=$("#thedi");
  var H=$element.height();
  $element.css("height",H-20);
}

以上程式碼$element是全域性的，最好定義成區域性的，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function func(){
  var $element=$("#thedi");
  var H=$element.height();
  $element.css("height",H-20);
}

三.對常用的一些程式碼進行精簡:

可以對一些常用的程式碼進行精簡，例如:

[JavaScript] 純文字檢視 複製程式碼
$first.click(function(){
  $first.css('border','1px solid red');
  $first.css('color','blue');
});

以上程式碼可以精簡如下:

[JavaScript] 純文字檢視 複製程式碼
$first.on('click',function(){
  $first.css({
    'border':'1px solid red',
    'color':'blue'
  });
});

四.避免使用通用選擇符:

選擇符儘量要精準，避免使用通用選擇符，例如:

[JavaScript] 純文字檢視 複製程式碼
$('.container > *')

以上程式碼可以改在為下面的程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('.container').children();

再來看一段程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('.someclass :radio');

以上程式碼可以改造為:

[JavaScript] 純文字檢視 複製程式碼
$('.someclass input:radio');