DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery性能優化指南
jQuery性能優化指南
編輯:關於JavaScript     

在jQuery中最快的選擇器是ID選擇器,因為它直接來自於JavaScript的getElementById()方法。
例如有一段HTML代碼:

 程序代碼
<div id="content">
<form method="post" action="#">
<h2>交通信號燈</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 紅色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黃色</li>
<li><input type="radio" class="off" name="light" value="green" /> 綠色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

如果采用下面的選擇器,那麼效率是低效的。

 程序代碼
var traffic_button = $("#content .button");


因為button已經有ID了,我們可以直接使用ID選擇器。如下所示:

 程序代碼
var traffic_button = $("#traffic_button");


當然 這只是對於單一的元素來講。如果你需要選擇多個元素,這必然會涉及到 DOM遍歷和循環,
為了提高性能,建議從最近的ID開始繼承。
如下所示:

 程序代碼
var traffic_lights = $("#traffic_light input");


2、在class前使用tag(標簽名)

在jQuery中第二快的選擇器是tag(標簽)選擇器( 比如:$("head") )。
跟ID選擇器累時,因為它來自原生的getElementsByTagName() 方法。

繼續看剛才那段HTML代碼:

 程序代碼
<div id="content">
<form method="post" action="#">
<h2>交通信號燈</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 紅色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黃色</li>
<li><input type="radio" class="off" name="light" value="green" /> 綠色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>


比如需要選擇 紅綠 單選框,
那麼可以使用一個tag name來限制(修飾)class ,如下所示:

 程序代碼
var active_light = $("input.on");

當然也可以結合 就近的ID,如下所示:

 程序代碼
var active_light = $("#traffic_light input.on");

 

在使用tag來修飾class的時候,我們需要注意以下幾點:
(1) 不要使用tag來修飾ID,如下所示:
 
 程序代碼
var content = $("div#content");

  這樣一來,選擇器會先遍歷所有的div元素,然後匹配#content。
(好像jQuery從1.3.1開始改變了選擇器核心後,不存在這個問題了。暫時無法考證。)

(2)不要畫蛇添足的使用ID來修飾ID,如下所示:
 
 程序代碼
var traffic_light = $("#content #traffic_light");

 

注:如果使用屬性選擇器,也請盡量使用tag來修飾,如下所示:

 程序代碼
$('p[row="c3221"]').html();

而不是這樣:

 程序代碼
$('[row="c3221"]').html();


特別提示:
tag.class 的方式 在IE下的性能  好於 .class 方式。
但在Firefox下  卻低於 直接 .class方式。
Google浏覽器下兩種都差不多。
我頁面上有300個元素,他們的性能差距都在50毫秒以內。

3、將jQuery對象緩存起來

把jQuery對象緩存起來 就是要告訴我們 要養成將jQuery對象緩存進變量的習慣。
下面是一個jQuery新手寫的一段代碼:

 程序代碼
$("#traffic_light input.on").bind("click", function(){ ... });
$("#traffic_light input.on").css("border", "1px dashed yellow");
$("#traffic_light input.on").css("background-color", "orange");
$("#traffic_light input.on").fadeIn("slow");

但切記不要這麼做。

我們應該先將對象緩存進一個變量然後再操作,如下所示:

 程序代碼
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... });
$active_light.css("border", "1px dashed yellow");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");

記住,永遠不要讓相同的選擇器在你的代碼裡出現多次.

注:(1)為了區分普通的JavaScript對象和jQuery對象,可以在變量首字母前加上 $ 符號。
(2)上面代碼可以使用jQuery的鏈式操作加以改善。如下所示:

 程序代碼
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... })
                    .css("border", "1px dashed yellow")
                    .css("background-color", "orange")
                    .fadeIn("slow");


如果你打算在其他函數中使用jQuery對象,那麼你必須把它們緩存到全局環境中。
如下代碼所示:

 程序代碼
// 在全局范圍定義一個對象 (例如: window對象)
window.$my = {
head : $("head"),
traffic_light : $("#traffic_light"),
traffic_button : $("#traffic_button")
};
function do_something(){
// 現在你可以引用存儲的結果並操作它們
var script = document.createElement("script");
$my.head.append(script);
// 當你在函數內部操作是, 可以繼續將查詢存入全局對象中去.
$my.cool_results = $("#some_ul li");
$my.other_results = $("#some_table td");
// 將全局函數作為一個普通的jquery對象去使用.
$my.other_results.css("border-color", "red");
$my.traffic_light.css("border-color", "green");
}
//你也可以在其他函數中 使用它

上一頁12 3 下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved