在jQuery中，對所有選擇器使用[name = X]是一個壞主意？

我正在使用Backbone，並決定我想要一種方法來區分綁定的HTML元素和那些沒有綁定的HTML元素。在jQuery中，對所有選擇器使用[name = X]是一個壞主意？

所以我會寫（在HAML）：

.container 
    .title(name='title') 
    .separator

正如你可以看到很明顯的動態元素是冠軍。

之所以這樣做，是因爲我可以調整風格並重命名類，而不用擔心打破應用程序。這也意味着在模板中我可以告訴動態元素是什麼，而不需要與Backbone View一起來回。

這意味着我使用$('[name=title]', this.el)從代碼引用此元素。我想知道這是否緩慢，如果在任何地方使用都是一個明顯的問題。我讀過id是最快的。我正在使用物品清單，因此id是不現實的。 class與name查詢相比如何？此外，如果您有關於跟蹤HTML模板中的動態元素的建議，我很樂意聽到他們的意見。

FYI：

我有這個想法，因爲我原來使用Backbone.ModelBinding插件，用於動態元素data-bind屬性，但現在我遠離它。
我正在使用CoffeeScript，Backbone和haml_coffee模板。
我也讀過$(this.el).find('[name=title]')比向選擇器提供上下文更快。

後續問題：

A convention for indicating whether an HTML element is referenced from JS code

更新jsperf測試所有建議：

來源

2012-01-29 vaughan

搜索DOM元素的name屬性可能比慢一點點由於需要Sizzle（jQuery使用的選擇器引擎），因此需要解析選擇器以確定需要找到的內容。 Sizzle需要從字符串「[name = title]」中確定它首先需要查看所有正在搜索的元素的「name」屬性，並且該屬性的值完全是「title」。雖然我讀過Sizzle的速度非常快，但我只能猜測，它將比本地JavaScript調用DOM元素屬性 - class（element.className） - value要慢。

爲了證實我的懷疑，我做了perf：http://jsperf.com/class-or-name-attr-lookup。結果並不是我在.find和.children調用中會懷疑的，但我前面提到的至少在前兩個例子中似乎得到了支持。然而，當使用最具體的選擇器時，我看到了產品代碼的性能提升 - 例如.children而不是.find - 因爲它沒有循環不必要的元素。

此外，我前段時間做了一個測試，以闡明使用簡單的選擇器語法和一些更難理解和/或jQuery-ish語法來比較我認爲很有趣的性能之間的一些差異：http://jsperf.com/id-id-vs-id-class/2。

我希望一些或任何這可以幫助任何人。

來源

2012-02-03 15:14:34 kalisjoshua

謝謝堆。很好的答案！ 'w/scope'類與'w/scope'測試相當有說服力。由於文檔的小尺寸，我懷疑「W/O範圍級」無法勝出。 ID與類也很有趣。我想知道是否僅使用ID選擇器會導致任何用戶可感知的加速。在我目前的開發工作流程中，儘管它不是真的可能，但可能使用像Google Closure這樣的JavaScript編譯器。 – vaughan 2012-02-09 04:51:14

名稱查找可能並不比類查找差，但考慮到與選擇你已指定它必須枚舉所有DOM元素才能找到它。如果我是你，我會至少指定類型，你需要：

this.$("div[name=title]")

另外請注意，您可以在骨幹視圖中使用簡寫;這一點。$是$（this.el）.find，一個快捷方式在功能上與$（選擇，this.el）

編輯

要回答你的問題，進一步，爲什麼這在DOM中沒有任何函數會返回具有特定類名稱的所有元素;有可能是我沒有意識到的新東西，但如果是這樣的話，快速谷歌搜索還沒有解決它。您可以在這裏查看finding DOM nodes with a specific class的示例實現。

由於該算法需要遍歷集合中的所有元素，因此檢查name屬性並不比檢查類屬性更昂貴。（請注意，我並沒有實際的基準，但我不知道有任何懷疑的理由）。

這起到了我提出至少指定DOM元素類型的原因;如果你使用諸如$（「[name = title]」）的選擇器，那麼jquery將被強制枚舉DOM中的每一個元素以找到你要找的東西;在這種情況下，您只搜索DOM的一小部分（您的視圖中的子項），因此這不是一個大問題，但是如果您指定類型如$（「div [name = title] 「），那麼它至少可以在可用的情況下使用getElementsByTagName進行優化。

（我說哪裏有合適的，因爲我相信，一些瀏覽器允許在DOM節點的子集，有的只對文件調用的getElementsByTagName）

來源

2012-01-29 17:24:00 taxilian

我更感興趣的是爲什麼''name lookup *可能沒有比class lookup糟糕*。 – vaughan 2012-01-31 13:39:07

在jQuery中，對所有選擇器使用[name = X]是一個壞主意？

回答

相關問題