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 回答