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

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

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

простой пример-сравнить запрос элементов с data-component='something' по сравнению с элементами с class='class1 class2 something anotherClass'.

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

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

4 ответов


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

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

редактировать:

на основе тестов Влада и моего jsperf... если производительность вызывает беспокойство (особенно IE)... классы по-прежнему путь


после проверки ответа 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

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

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


Я не знаю обо всех этих ответах, но я запустил свой собственный тест, и атрибут быстрее.

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

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