Являются ли селектора атрибутов атрибутов данных быстрее, чем селектора классов?

Несколько месяцев назад в этой статье указывалось, что на самом деле классов можно было бы избежать вместе с развитием веб-сайта.

Мой вопрос: насколько эффективны селектора данных по сравнению с селекторами классов?

Простым примером может быть сравнение запросов для элементов с data-component='something' по сравнению с элементами с class='class1 class2 something anotherClass'.

Селектор [data-<attr>='<value>'] будет проверять значение в целом по сравнению с строкой класса, которая должна быть разделена. Имея это в виду, атрибуты данных должны быть быстрее.

Итак, чтобы уточнить вопрос, в случае CSS, нам лучше с селектором селектора или селектором данных? И с точки зрения javascript, jQuery("[data-component='something']") будет более эффективным, чем jQuery(".something")?

Ответы

Ответ 1

Я бы не назвал его окончательным, но он кажется, что селектора классов быстрее... Я просто поставил это вместе для теста quickie.

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

ИЗМЕНИТЬ

Основываясь на тестах Vlad и my jsperf... если производительность является проблемой (особенно IE)... классы по-прежнему остаются в пути

Ответ 2

После проверки ответа BLSully и тестовой страницы которую он предоставил, здесь приведены фактические цифры для сравнения.

Производительность селектора класса jQuery vs jQuery: производительность селектора атрибутов данных в секунду:

  • 31% быстрее в Chrome 27.0.1453
  • 140% быстрее в Firefox 15.0.1
  • 131% быстрее в Firefox 21.0
  • 1,267% быстрее в IE 9.0
  • 1,356% быстрее в IE 10.0

Ответ 3

У меня сложилось впечатление, что производительность селекторов достаточно быстрая прямо сейчас даже в мобильных браузерах. Если вы действительно не планируете много использовать селектор, атрибуты данных или класс, (в этом случае я бы предложил вернуться к вашему коду, чтобы попытаться кэшировать уже запрошенные селекторы), мы можем считать их не такими уж плохими. И я бы даже сказал, что это не драматично использовать стиль над другими.

Я думаю, что поставщики браузеров потратили больше времени на улучшение наиболее часто используемого сценария (запрос против классов), чем запрос против селекторов. Это меняется, и я не удивлюсь, если они тоже начнут оптимизировать другие случаи.

Ответ 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);