44

几个月前,这篇文章指出,实际上可以从网站开发中完全避免类。

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

一个简单的示例是将查询元素与data-component='something'与元素进行比较class='class1 class2 something anotherClass'

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

所以,为了细化这个问题,在 CSS 的情况下,我们是使用类选择器还是数据选择器更好?从javascript的角度来看,会jQuery("[data-component='something']")jQuery(".something")

4

4 回答 4

26

我不会说它是决定性的,但它确实看起来类选择器更快......我只是把它放在一起进行快速测试。

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

编辑

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

于 2012-09-19T14:52:01.657 回答
10

在查看了 BLSully 的答案和他提供的测试页面后,以下是实际数据以供比较。

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%
于 2013-05-31T09:38:53.280 回答
4

我的印象是,即使在移动浏览器中,选择器的性能现在也足够快。除非您真的打算大量使用选择器、数据属性或基于类的选择器(在这种情况下,我建议重新访问您的代码以尝试缓存已经查询的选择器)我们可以认为它们还不错。我什至会说,在其他风格上使用风格并不引人注目。

我认为浏览器供应商花费了更多时间来改进最常用的场景(查询类)而不是查询选择器。这种情况正在发生变化,如果他们也开始优化其他案例,我不会感到惊讶。

于 2012-09-20T08:22:00.887 回答
-1

我不知道所有这些答案,但我进行了自己的测试并且属性更快。

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

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

于 2016-05-27T00:59:31.550 回答