数据属性 css 选择器比类选择器快吗？

Question

几个月前this article 指出，实际上可以从网站开发中完全避免课程。

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

一个简单的例子是比较使用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

编辑：

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

Answer 2

在查看了 BLSully 的回答和他提供的test page 之后，这里是实际的数字进行比较。

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

• 在 Chrome 27.0.1453 中速度提高 31%
• 在 Firefox 15.0.1 中速度提高了 140%
• 在 Firefox 21.0 中速度提高了 131%
• 在 IE 9.0 中速度提高了 1,267%
• 在 IE 10.0 中速度提高了 1,356%

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