jQuery性能 - 通過data-attr或類選擇？

Question

哪個更快，為什么？ 通過$('div[data-something]')或$('div.something')選擇div（用於插件需求$('div.something') ？ 我傾向於前者，因為它“更清潔”。

基於這個問題，我知道我不應該同時使用這兩個問題。 但是我沒有發現它們之間是否存在差異。

Answer 1

至少在Chrome 16中， 沒有區別 。 但是，如果使類選擇器不那么具體（例如$(".test") ），它的表現優於其他方法：

這有些出乎意料，因為正如ShankarSangoli所提到的，我認為div.test類選擇器會更快。

Answer 2

它會因瀏覽器而異。 幾乎所有的瀏覽器現在都支持querySelectorAll ，jQuery會querySelectorAll使用它。 querySelectorAll可以與屬性存在選擇器一起使用，所以如果它在那里jQuery不必執行工作，它可以將它卸載到引擎。

對於沒有querySelectorAll舊瀏覽器，jQuery顯然必須做更多工作，但即使IE8也有它。

與大多數這些事情一樣，您最好的選擇是：

1. 除非你發現問題，否則不要擔心，並且

2. 如果您發現問題，請在您打算支持的瀏覽器上對其進行分析，然后做出明智的決定。

Answer 3

按類選擇總是比屬性選擇器快，因為如果瀏覽器支持，jQuery會首先嘗試使用本機getElementByCalssName 。 如果沒有，它使用querySelector ，它使用css選擇器來查找頁面中的元素。