jQuery元素選擇器

Question

這兩個代碼塊有沒有任何顯着的性能差異？

var element = $("#some-element"); 

SomeMethod1(element); 
SomeMethod2(element); 
SomeMethod3(element); 

和...

SomeMethod1($("#some-element")); 
SomeMethod2($("#some-element")); 
SomeMethod3($("#some-element")); 

Answer 1

這取決於您的意思significant。

第一個代碼段總是比第二個代碼段快，因爲不止一次調用$()會產生代價（因爲jQuery不會緩存先前調用的結果）。無論重要與否取決於您的性能要求。

Answer 2

這確實在DOM元素查找並創建一個jQuery對象。

var element = $("#some-element"); 

在第一個，它重用此對象。

在第二個，它必須做查找和創建3倍，因此，第一個是更好的性能明智。

Answer 3

這並不重要，但也不可忽略。在這種情況下，因爲您使用的是ID選擇器，它不會有太大的區別，但是如果您要使用類選擇器或屬性選擇器，那麼它將會產生很大的差異。

第一個將總是給你比第二個更好的性能，因爲你在多個地方重複使用同一個對象。

Answer 4

是的。第一個更快，第二個更慢

爲什麼？

因爲對於元件第一searchs只有一次，第二三次

Answer 5

後期：

1. 3串創作（字符串文字保持選擇器）
2. 3函數調用$()，其中的每一個導致
以內的更多函數調用
3. 3文檔搜索相同元素

鑑於使用的選擇器的類型，我不會說它是顯着，但後者需要更多的處理時間並使用更多的內存（請參閱上面的列表）。這些東西加起來就超過了應用程序的大小。

使用不太直接的選擇器，它可能會變得非常快速。

編輯：然而，後者，是醜陋的，讓我瘋了。 :)

Answer 6

那麼，第一個片段重用第一個電話到$("#some-element")，而另一個例子需要查找三次#some-element。