有数据属性的CSS选择器比类选择更快？(Are data attribute css selecto

几个月前， 这篇文章指出，类实际上可以一起避免从网站的发展。

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

一个简单的例子。将比较查询与元素data-component='something' ，而使用元素class='class1 class2 something anotherClass' 。

的[data-<attr>='<value>']选择器将检查该值作为一个整体相对于类字符串应当被拆分。 考虑到这一点，数据的属性必须更快。

因此，完善的问题，在CSS的情况下，我们好了与类选择或数据选择？ 而且从一个JavaScript点，将jQuery("[data-component='something']")比更有效jQuery(".something")

Answer 1:

我不会把它定论 ，但它确实出现类选择更快......我只是把这个共同为一个匆匆的考验。

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

编辑 ：

基于弗拉德和我jsperf测试......如果性能是一个问题（尤其是IE）...类仍然要走的路

Answer 2:

检查出BLSully的答案，并在之后的测试页面 ，他提供的，这里是比较实际的数字。

jQuery的类选择性能VS每秒jQuery的数据属性选择器的性能操作：

• 在Chrome 27.0.1453快31％
• 在Firefox 15.0.1快140％
• 在Firefox 21.0快131％
• 在IE 9.0更快1267％
• 在IE 10.0更快1356％

Answer 3:

我的印象是，选择的表现都足够快，现在即使是在移动浏览器在那里。 除非你真的打算使用选择很多，数据属性或基于类的，（在这种情况下，我会建议重新审视你的代码，试图缓存已经查询选择器），我们可以认为他们没有那么糟糕。 我甚至可以说，是不是戏剧性的使用样式比其他。

我认为浏览器厂商已经花费了更多的时间比改善对查询选择最常用的方案（针对类查询）。 这种情况正在改变，如果他们开始过优化其他情况下我也不会感到惊讶。

Answer 4:

我不知道这一切的答案，但我跑我自己的测试和属性是速度更快。

你可以试试你的自我只是节省时间之初，做任务，并获得最后的时间，然后做数学题

  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); 

文章来源: Are data attribute css selectors faster than class selectors?