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类选择器性能与每秒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

我不知道所有这些答案，但我运行了自己的测试，属性更快。

你可以尝试自己只需节省开始时间，完成任务并获得最后时间然后进行数学计算

＆＃13;

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

＆＃13;

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

4 个答案: