最小化jQuery實例vs創建更多實例

爲什麼最小化jQuery對象（通過從緩存的jQuery集合中搜索）會比創建更多的jQuery對象實例更慢？

我驚呆了，看到我準備的測試結果。我一直認爲最小化創建$實例會更慢。

這就是我用來寫，因爲我緩存父（我稱之爲「appRoot」）。

var appRoot = $("#appRoot"); 
    appRoot.find(".element1").css("color","red"); 
    appRoot.find(".element2").css("color","blue");

$(".element1").css("color","red"); 
    $(".element2").css("color","blue");

查看測試結果（稍微不同的情形）。 jsperf minimize-jquery-object-creation事實證明，緩存的代碼段比未緩存的代碼段慢。

我想明白爲什麼？

2011-07-12 adardesign

這很有趣 – amosrivera

這就是代碼剖析如此重要的原因。 –

也許jquery .find（）比DOM搜索慢？ – Cristy

你需要考慮你的測試包含小於10個div或其他HTML元素。像第一個例子中那樣編寫代碼的原因是爲了讓選擇器更快，但是需要額外的方法調用。通常情況下，選擇器應該是兩者中較昂貴的選擇器，所以增益會超出損失，但是使用DOM這個小選擇器將非常便宜，無論您如何編寫它。

人們經常會誤以爲不記得一個更復雜，更大的DOM將改變代碼的瓶頸。我認爲jsperf應該對此有一些警告。

2011-07-12 20:43:34

+1非常好的一點！ – adardesign

我認爲find（）調用是減慢速度的原因。

緩存jQuery對象的唯一原因是如果您要多次引用或操作它。如果您只是設置CSS屬性，並且該屬性在渲染頁面的生命週期中不會被更改，那麼沒有理由定義緩存變量。

2011-07-12 20:28:53

有趣的一點，我們需要改變測試，任何想法如何得到這個底部？ – adardesign

看來這是正確的。 '.find（）'通過元素檢查過濾，以查看在$（'。className'）'如果它存在時使用本地'document.getElementsByClassName'的孩子是否匹配選擇器。 – scurker

所以'$（「。element1」，appRoot）'會最快？ – adardesign

我認爲這是因爲在「更多的jQuery對象創建」，jQuery的可以直接使用最近的API

document.getElementsByClassName("classvalue")

在其他情況下用「少jQuery的」你必須總是驗證找到的元素位於#appRoot下，需要更多時間。

下面是使用文檔作爲爲approot這似乎縮小差距一點點在第二次運行另一個測試：http://jsperf.com/minimize-jquery-object-creation/6

2011-07-12 20:36:28

我想知道同樣的事情，不同之處在於它可以使用appRoot.getElementsByClassName（「元素1」）仍然使用原生功能，但只是返回appRoot的孩子。 – jfriend00

回答