数据属性的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选择器比类选择器快吗？

回答

相关问题