数据属性的CSSselect器比类select器更快吗？
几个月前这篇文章指出，网站开发实际上可以避免所有的类。
我的问题是，数据select器与类select器相比有多高效？
一个简单的例子就是比较元素与data-component='something'与元素class='class1 class2 something anotherClass' 。
[data-<attr>='<value>']select器将检查整个值与应该分割的类string。 考虑到这一点，数据属性应该更快。
所以，为了改进这个问题，在CSS的情况下，我们最好使用类select器还是数据select器？ 从javascript的angular度来看， jQuery("[data-component='something']")比jQuery(".something")更有效率吗？
我不会说这是决定性的 ，但它确实出现了类select器速度更快……我只是把它们放在一起进行快速testing。
http://jsperf.com/data-selector-performance
编辑 ：
基于弗拉德和我的jsperftesting…如果性能是一个问题（特别是IE）…class级仍然是要走的路
在查看了BLSully的答案和他提供的testing页之后 ，这里是实际的数字作比较。
jQuery类select器性能vs jQuery数据属性select器性能操作每秒：
- Chrome 27.0.1453的速度提高了31％
- Firefox 15.0.1的速度提高了140％
- Firefox 21.0的速度提高了131％
- IE 9.0中速度提高了1267％
- IE 10.0中速度提高了1356％
我的印象是，即使在移动浏览器中，select器的性能也足够快。 除非你真的打算使用select器，数据属性或基于类（在这种情况下，我会build议重新访问你的代码，试图caching已经查询过的select器），我们可以认为它们不是那么糟糕。 而且我甚至会说对他人使用风格并不是很戏剧性的。
我认为浏览器厂商花费了更多的时间来改进最常用的场景（对类的查询），而不是查询select器。 这种情况正在改变，如果他们也开始优化其他案例，我也不会感到惊讶。
我不知道所有这些答案，但我跑我自己的testing和属性更快。
你可以尝试一下你自己，只需要在开始的时候节省时间，完成任务，然后得到最后的时间，然后做math
var newDate = new Date().getTime(); $('.test-t').removeClass('act'); $('.t1r').addClass('act'); var currentDate = new Date().getTime(); var diff = currentDate-newDate; console.log(diff); var newDate = new Date().getTime(); $('.test-t2').attr('this-act',''); $('.t2r').attr('this-act','1'); var currentDate = new Date().getTime(); var diff = currentDate-newDate; console.log(diff);
