jQuery .hasClass () против .is ()

96

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

$('#foo').hasClass('bar');

или

$('#foo').is('.bar');

jquery

— Омер Бохари
источник

6

Вы всегда можете проверить производительность на этом сайте в нескольких браузерах: jsperf.com ... Вот несколько тестовых примеров для просмотра: jsperf.com/browse

— iwasrobbed

164

Обновить:

Я провел тест после комментария и четыре раза поддержал очень комментарий. Оказывается, то, что я сказал, - правильный ответ. Вот результат:

введите описание изображения здесь

http://jsperf.com/hasclass-vs-is-so

Это isмногоцелевой, вы можете, например, делать is('.class')и is(':checked')т. Д., Что означает, что у isнего больше возможностей, где hasClassон ограничен, который только проверяет, установлен ли класс или нет.

Следовательно, hasClassдолжно быть быстрее, если производительность на любом уровне является вашим приоритетом.

— Сарфраз
источник

7

У вас есть доказательства того, что это быстрее? Тот факт, что функция имеет меньшую функциональность, НЕ означает, что она автоматически быстрее.

— Крис

15

@Kris: Да, знаю: jsperf.com/hasclass-vs-is-so . Как я уже сказал, hasClass это намного быстрее.

— Sarfraz

4

'намного быстрее' => 'намного быстрее'

— Кирк Строубек

@SgtPooki, я просто просил доказательства; если это правда, я хотел знать почему. Я такой любознательный :). Вы можете легко расширить функциональность и сделать ее быстрее; это всегда зависит от реализации. Ваши 99% - это широкое обобщение и не обязательно истинное состояние разработки программного обеспечения. Ваш вопрос: «Будет ли jQuery когда-нибудь так же быстр, как обычный JavaScript? Ответ, отличный от« нет », неверен». не лучший вопрос; jQuery на самом деле имеет множество оптимизаций, которые обеспечивают более быстрый доступ к элементам DOM после кэширования данных; это действительно зависит от вашего конкретного использования.

— Крис

1

@SgtPooki насколько быстрее взгляните на движок селектора sizzle; поскольку я продолжаю упоминать, это зависит от реализации, и в старых браузерах, которые изначально не поддерживают запросы, это, скорее всего, будет быстрее благодаря реализации jQuery, поскольку нет собственной версии (по умолчанию выигрывает). Также, если вы продолжаете вспоминать одни и те же элементы DOM, в зависимости от браузера и версии, может потребоваться дополнительное время, поскольку jQuery может кэшировать этот элемент для более быстрого поиска. Обычно собственные функции JavaScript работают быстрее; но это зависит от поддержки и реализации браузером.

— Крис

13

Поскольку isон более общий, чем hasClassи использует filterдля обработки предоставленного выражения, кажется вероятным, чтоhasClass это быстрее.

Я запустил следующий код из консоли Firebug:

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

Я получил:

usingIs: 3191,663 мс
usingHas: 2362,523 мс

Не большая разница, но может иметь значение, если вы много делаете тестов.

ИЗМЕНИТЬ, когда я говорю «не большая разница, я хочу сказать, что вам нужно сделать 10000 циклов, чтобы увидеть разницу в 0,8 секунды. Я был бы удивлен, если бы увидел веб-приложение, в котором переключение с isна hasClassпривело бы к значительному улучшению общей производительности. Однако я допускаю, что это увеличение скорости на 35%.

— Dancrumb
источник

9

Оба должны быть довольно близки по производительности, но $('#foo').hasClass('bar');мне кажутся более читаемыми и семантически правильными.

— Дарин Димитров
источник

7

.hasClassнамного быстрее, чем .is вы можете протестировать здесь . Измените тестовый пример по своему усмотрению.

— Гаурав
источник