請問下述三種方式,在事件click真正被觸發時,哪一種方式執行起來是比較快的呢?
小弟現在是使用第一種方式,但很想改成第二或第三種,因為看起來先將selector選出來的物件存起來,要用到的時候就可以用了,這樣的方式是比較好得?!但又怕定義太多預先選擇好的物件,會將記憶體塞爆,所以最後使用第一種方式,當該按鈕被按下去(click)時,才在當下去取得各物件。
以下是範例程式
第一種
function init(){
$("#apply").unbind("click").bind("click", function(){
$("#restore, #apply, #add" ).attr("disabled", true);
onclickApplySummary();
});
$("#restore").unbind("click").bind("click", function(){
$("#restore, #apply, #add" ).attr("disabled", true);
onclickRestoreSummary();
});
$("#add").unbind("click").bind("click", function(){
$("#apply, #restore").removeAttr("disabled");
onclickAddTag();
});
}
第二種
function init(){
var $restoreApplyAddBtn = $("#restore, #apply, #add" );
$("#apply").unbind("click").bind("click", function(){
$restoreApplyAddBtn.attr("disabled", true);
onclickApplySummary();
});
$("#restore").unbind("click").bind("click", function(){
$restoreApplyAddBtn.attr("disabled", true);
onclickRestoreSummary();
});
$("#add").unbind("click").bind("click", function(){
$("#apply, #restore").removeAttr("disabled");
onclickAddTag();
});
}
第三種
function init(){
var $restore = $("#restore");
var $apply = $("#apply");
var $add = $("#add");
$apply.unbind("click").bind("click", function(){
$restore.attr("disabled", true);
$apply.attr("disabled", true);
$add.attr("disabled", true);
onclickApplySummary();
});
$restore.unbind("click").bind("click", function(){
$restore.attr("disabled", true);
$apply.attr("disabled", true);
$add.attr("disabled", true);
onclickRestoreSummary();
});
$add.unbind("click").bind("click", function(){
$apply.removeAttr("disabled");
$restore.removeAttr("disabled");
onclickAddTag();
});
}
請各位先進為我指點迷津,或是有其他建議請不吝提供 :)
謝謝。
fillano 大說的非常正確【第一種我想會稍慢,但是使用者不會有感覺的。】
其實您太小看現今電腦的處理速度和記憶體容量了,就算宣告了很多個物件,也不會比您去下載一個 flash 載入記憶體後來的大,小弟是比較建議您用第二種的方式:
1、您的開發速度較快
2、物件已定義清楚也減少您之後 key 程式碼的出錯率
3、物件已定義成集合,降低 jQuery 的搜尋時間
4、也讓之後接手的設計師較快了解您程式的內容
id selector應該是最快的啦,雖然用起來還是會比document.getElementById()稍慢,不過使用者應該不會有感覺。我比較建議第一種,感覺這也比較像jQuery的style。第二個跟第三個方法,其實在乎叫onclick的時候會到init()找$restoreApplyAddBtn或$restore、$apply、$add、等變數的定義,會花一點時間的代價,不過應該比query node的代價小。(不過我jQuery不是很熟,說錯了請糾正)
另外,如果你不會重複呼叫init function,其實可以用$.ready()來代替,這樣比較不會影響global scope。
我這三種方式都是id selector呀...
主要的差異是在於,第一種沒有作暫存(cache or temp)
但第二和第三種有做,所以使用的時候jQuery就不用再去做一次id selector這樣的行為,應該才是比較快的吧?!
就我來看,速度從快到慢應該是 3 > 2 > 1 呢...
我知道,您說的沒錯阿?我只是說使用id selector比document.getElementById()慢。另外呼叫function時建立scope chain跟context switch的代價也比query的代價小,所以這三個方法的速度是3>2>1沒錯阿。:)
也可以參考:[url]http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip5[/url]
阿,另外就是,除非你一次處理的node真的很多,使用第一種方法的時候,應該也不會有明顯的速度差距啦。
其實應該是說,習慣的養成,這樣的以後在開發大型專案時這些小地方反而是一些關鍵所在。