jQuery優化性能的十種方法

1，老是從ID選擇器開始繼承

例如：

<div id="content">
	<form method="post" action="#">
		<h2>成績</h2>
		<ul id="grades">
			<li><input type="radio" class="good" name="grade" value="fine" /> 優秀</li>
			<li><input type="radio" class="good" name="grade" value="good" />良好</li>
			<li><input type="radio" class="bad" name="grade" value="bad" />差</li>
		</ul>
		<input class="button" id="grade_button" type="submit" value="提交" />
	</form>
</div>

咱們要找到提交按鈕：

效率低：var btn = $("#content .button")

高效率：var btn = $("#grade_button")

2.在class前使用tag(標籤名)

 

選擇優秀和良好的單選框

那麼可使用一個tag name來限制(修飾)class ，以下所示：

var active_grade = $(「input.good」);

在使用tag來修飾class的時候，咱們須要注意如下幾點：
（1） 不要使用tag來修飾ID，以下所示：
var content = $(「div #content」);
這樣一來，選擇器會先遍歷全部的div元素，而後匹配#content。
（2）不要多此一舉的使用ID來修飾ID，以下所示：
var traffic_light = $(「#content #grades」);

3.將jQuery對象緩存起來

例如：

$("#grades input.on").bind("click", function(){ });
$("#grades input.on").css("border", "1px dashed yellow");

上面的代碼是正確的，可是效率很低，換成以下：

var $grades = $("#grades input.on");
$grades .bind("click", function(){ });
$grades .css("border", "1px dashed yellow");

4.對直接的DOM操做進行限制

例如：

var list10 = []; //假設這裏是10個不一樣的字符串
$mylist = $("#mylist"); //jQuery 選擇到 <ul> 元素
for (var i=0, l=list10.length; i<l; i++){ 
    $mylist.append("<li>" + list10[i] + "</li>"); 
}

咱們應該將整套元素字符串在插入進dom中以前先所有建立好

var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 這個變量將用來存儲咱們的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
	top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);

5.冒泡

除非在特殊狀況下, 不然每個js事件(例如:click, mouseover等.)都會冒泡到父級節點。

當咱們須要給多個元素調用同個函數時這點會頗有用。

代替這種效率不好的多元素事件監聽的方法就是, 你只需向它們的父節點綁定一次。

好比, 咱們要爲一個擁有不少輸入框的表單綁定這樣的行爲: 當輸入框被選中時爲它添加一個class

傳統的作法是，直接選中input，而後綁定focus等

$("#entryform input").bind("focus", function(){
	$(this).addClass("selected");
}).bind("blur", function(){
	$(this).removeClass("selected");
});

固然上面代碼能幫咱們完成相應的任務，但若是你要尋求更高效的方法，請使用以下代碼：

$("#entryform").bind("focus", function(e){
　　　　　var $cell = $(e.target); // e.target 捕捉到觸發的目標元素
	$cell.addClass("selected");
}).bind("blur", function(e){
　　　　　var $cell = $(e.target);
	$cell.removeClass("selected");
});

6.推遲到 $(window).load

jQuery對於開發者來講有一個很誘人的東西, 能夠把任何東西掛到$(document).ready下。

儘管$(document).rady 確實頗有用， 它能夠在頁面渲染時，其它元素還沒下載完成就執行。

若是你發現你的頁面一直是載入中的狀態，頗有可能就是$(document).ready函數引發的。

你能夠經過將jQuery函數綁定到$(window).load 事件的方法來減小頁面載入時的cpu使用率。

它會在全部的html(包括iframe)被下載完成後執行。

一些特效的功能，例如拖放, 視覺特效和動畫, 預載入隱藏圖像等等，都是適合這種技術的場合

7.壓縮JavaScript

在線壓縮地址: http://dean.edwards.name/packer/

壓縮以前，請保證你的代碼的規範性，不然可能失敗，致使Js錯誤。

8.儘可能使用ID代替Class。

前面性能優化已經說過，ID選擇器的速度是最快的。因此在HTML代碼中，能使用ID的儘可能使用ID來代替class。

看下面的一個例子

9.給選擇器一個上下文

jQuery選擇器中有一個這樣的選擇器，它能指定上下文。

jQuery( expression, context );

經過它，能縮小選擇器在DOM中搜索的範圍，達到節省時間，提升效率。

普通方式：

$(‘.myDiv’)

改進方式：

$(‘.myDiv’ , $(「#listItem」) )

10.慎用 .live()方法（應該說盡可能不要使用）

這是jQuery1.3.1版本以後增長的方法，這個方法的功能就是爲 新增的DOM元素 動態綁定事件。

但對於效率來講，這個方法比較佔用資源。因此請儘可能不要使用它。