數據屬性的CSS選擇器比類選擇器快嗎？

幾個月前this article指出，實際上可以從網站開發中一起避免類。數據屬性的CSS選擇器比類選擇器快嗎？

我的問題是，數據選擇器與類選擇器相比有多高效？

一個簡單的例子是比較data-component='something'元素與class='class1 class2 something anotherClass'元素的查詢。

[data-<attr>='<value>']選擇器將檢查整個值與應分割的類字符串。考慮到這一點，數據屬性應該更快。

因此，爲了改進問題，對於CSS來說，使用類選擇器還是數據選擇器會更好？從javascript的角度來看，jQuery("[data-component='something']")會比jQuery(".something")更有效率嗎？

來源

2012-09-19 Vlad Nicula

我不知道是什麼樣的網絡編程與那篇文章的詭辯相關，但我確信它與我所做的事無關。另外，如果你仔細閱讀那篇文章，我懷疑它的作者會像對待類一樣關心'data-'屬性;畢竟，它們都代表着同樣的「罪行」。 – Pointy

至於你的問題，一些[jsperf]（http://jsperf.com）測試可能有助於回答這個問題。我懷疑任何具有'querySelectorAll（）'的現代瀏覽器都不會有任何困難。 – Pointy

我越想到數據屬性和樣式，而不是添加類，我越喜歡它們。例如，塊元素（如搜索框）被隱藏的事實可以通過data-state ='hidden'來指示。對於我來說，這對開發人員來說似乎更容易閱讀，而不是「組件頭部觸摸隱藏的圓頂」。 –

~~我不會說它確定~~ ，但它確實出現類選擇器更快......我只是把它放在一起進行快速測試。

http://jsperf.com/data-selector-performance

編輯：

基於弗拉德和我jsperf測試......如果性能是一個問題（尤其是IE）...類仍然去

來源

2012-09-19 14:52:01 BLSully

我也在測試這些類，將一些querySelectorAll添加到我的測試用例中。 –

http://jsperf.com/testing-data-atribute-selectors是的，它似乎甚至querySelectorAll在數據屬性上較慢。這令人震驚！我期待他們更快，因爲沒有字符串拆分來獲取\「\」中的實際值。 –

Wow ....在IE9中測試...單類選擇器_blows away_數據選擇器...它比那個測試的速度還要快。IE 6300 ops/sec與Chrome的4800 ... – BLSully

方式我的印象是，即使在移動瀏覽器中，選擇器的表現也足夠快。除非你真的打算大量使用選擇器，否則數據屬性或基於類的（在這種情況下，我會建議重新訪問你的代碼以緩存已經查詢過的選擇器），我們可以認爲它們不是那麼糟糕。我甚至會說，對其他人使用風格並不是很戲劇性。

我認爲瀏覽器供應商花費了更多時間來改進最常用的場景（對類的查詢），而不是查詢選擇器。這種情況正在改變，如果他們也開始優化其他案例，我也不會感到驚訝。

來源

2012-09-20 08:22:00

在檢查出BLSully的回答和他提供的test page之後，這裏是實際的比較數字。

jQuery的類選擇性能VS每秒jQuery的數據屬性選擇演奏操作：

31％鉻27.0.1453
140％在Firefox更快15.0.1
131％中要快火狐在IE更快21.0
1267％9.0
1356％的IE 10.0

更快0

來源

2013-05-31 09:38:53 Zac

我不知道所有這些答案，但我跑我自己的測試和屬性更快。

你可以試試你的自我只是節省時間之初，做任務，並獲得最後的時間，然後做數學

\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t').removeClass('act'); 
 
\t \t $('.t1r').addClass('act'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff); 
 

 
\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t2').attr('this-act',''); 
 
\t \t $('.t2r').attr('this-act','1'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff);

來源

2016-05-27 00:59:31

我不確定每個實例是否足以證明案件。每種方法的時間有多少不同，因爲我無法運行您的代碼段？ – miltonb

也許現在，在詢問問題幾年之後，瀏覽器有時間更新他們的查詢引擎後，數據屬性會更快。好的事情指出了這一點。也許我們應該更新問題以符合今天的標準。 –

數據屬性的CSS選擇器比類選擇器快嗎？

回答

相關問題