数据属性css选择器比类选择器更快吗？ [英] Are data attribute css selectors faster than class selectors?

问题描述

几个月前，这篇文章< a>指出类实际上可以从网站开发中一起避免。

我的问题是，与类选择器相比，数据选择器的效率如何？

一个简单的例子是比较元素与 data-component ='something' code> class ='class1 class2 something anotherClass'。

[data-< attr> ='< value>'] 选择器将检查整个值与应该拆分的类字符串。考虑到这一点，数据属性应该更快。

因此，为了改进问题，在CSS的情况下，我们最好使用类选择器或数据选择器？从JavaScript的角度来看， jQuery（[data-component ='something']）比 jQuery > > >

解决方案

，但它确实出现类选择器更快...我只是把这一起快速测试。

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

EDIT ： p>

基于Vlad和我的jsperf测试...如果性能是一个问题（特别是IE）...类仍然是要走的路线

A few months ago this article pointed out that classes could actually be avoided all together from website development.

My question is, how efficient are the data selectors compared to class selectors?

A simple example would be to compare querying for elements with data-component='something' versus elements with class='class1 class2 something anotherClass'.

The [data-<attr>='<value>'] selector will check the value as a whole versus the class string that should be split. With this in mind, data atributes should be faster.

So, to refine the question, in the case of CSS, are we better off with class selector or data selector? And from a javascript point of view, will jQuery("[data-component='something']") be more efficient than jQuery(".something")?

解决方案

I wouldn't call it conclusive, but it does appear class selectors are faster... I just put this together for a quickie test.

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

EDIT:

Based on Vlad's and my jsperf tests... if performance is a concern (especially IE)... classes are still the way to go

这篇关于数据属性css选择器比类选择器更快吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！