Являются ли селекторы 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);