iT邦幫忙

0

jQuery使用selector的方式哪一種比較快呢?

  • 分享至 

  • xImage

請問下述三種方式,在事件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();
	});
}

請各位先進為我指點迷津,或是有其他建議請不吝提供 :)

謝謝。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

20
careychen
iT邦研究生 5 級 ‧ 2009-01-22 22:12:07
最佳解答

fillano 大說的非常正確【第一種我想會稍慢,但是使用者不會有感覺的。】

其實您太小看現今電腦的處理速度和記憶體容量了,就算宣告了很多個物件,也不會比您去下載一個 flash 載入記憶體後來的大,小弟是比較建議您用第二種的方式:
1、您的開發速度較快
2、物件已定義清楚也減少您之後 key 程式碼的出錯率
3、物件已定義成集合,降低 jQuery 的搜尋時間
4、也讓之後接手的設計師較快了解您程式的內容

16
fillano
iT邦超人 1 級 ‧ 2009-01-22 12:20:46

id selector應該是最快的啦,雖然用起來還是會比document.getElementById()稍慢,不過使用者應該不會有感覺。我比較建議第一種,感覺這也比較像jQuery的style。第二個跟第三個方法,其實在乎叫onclick的時候會到init()找$restoreApplyAddBtn或$restore、$apply、$add、等變數的定義,會花一點時間的代價,不過應該比query node的代價小。(不過我jQuery不是很熟,說錯了請糾正)

另外,如果你不會重複呼叫init function,其實可以用$.ready()來代替,這樣比較不會影響global scope。

看更多先前的回應...收起先前的回應...
mickyp iT邦新手 4 級 ‧ 2009-02-02 21:56:29 檢舉

我這三種方式都是id selector呀...
主要的差異是在於,第一種沒有作暫存(cache or temp)
但第二和第三種有做,所以使用的時候jQuery就不用再去做一次id selector這樣的行為,應該才是比較快的吧?!

就我來看,速度從快到慢應該是 3 > 2 > 1 呢...

fillano iT邦超人 1 級 ‧ 2009-02-03 11:42:24 檢舉

我知道,您說的沒錯阿?我只是說使用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]

fillano iT邦超人 1 級 ‧ 2009-02-03 11:43:52 檢舉

阿,另外就是,除非你一次處理的node真的很多,使用第一種方法的時候,應該也不會有明顯的速度差距啦。

careychen iT邦研究生 5 級 ‧ 2009-02-03 12:48:08 檢舉

其實應該是說,習慣的養成,這樣的以後在開發大型專案時這些小地方反而是一些關鍵所在。

我要發表回答

立即登入回答