Производительность селектора jQuery

Question

Почему идентификатор селектора быстрее, чем селектор класса в jQuery?

Answer 1

Самый быстрый селектор в jQuery - это селектор идентификатора ($ ('# someid')).Это потому, что он отображается непосредственно на собственный метод JavaScript, getElementById ().

Answer 2

Браузеры могут извлекать элементы по идентификатору быстрее, чем с помощью класса.Для данного идентификатора возвращается один или ноль элементов при использовании getElementById.Это позволяет браузерам отслеживать идентификаторы элементов на странице, обеспечивая быстрые операции поиска по идентификатору.

Поиск по имени класса делает необходимым поиск всех элементов с данным именем класса.,Несмотря на то, что некоторые браузеры поддерживают getElementsByClassName, внутренне им нужно пройти по всему дереву DOM для их извлечения.

Селектор jQuery действует как оболочка для этих собственных функций вместе с другими, такими как getElementsByTagName, querySelector или querySelectorAll (и он также поставляется с библиотекой селектора Sizzle, которая используется, если в браузере отсутствует необходимая встроенная функция).

Поведение не определено, если этот идентификатор имеется более чем у одного элемента.

потому что есть ссылки на элементы DOM с определенным идентификатором.Кроме того, не следует

Answer 3

Эти пункты о Id Selector также могут вам помочь.

Точка 1:

Не квалифицируйте ваш селектор при поиске по Id .

• поиск по Id использует собственный браузер getElementById (который очень быстрый )

ПЛОХОЙ Путь

$("div#your-id")

BEST Way

$("#your-id")

Точка 2:

Вы должны Всегда кэшировать ваш выбор до некоторой переменной

ПЛОХОЙ Путь

$("#myList").click( function() {
   $("#myList").hide(); 
});

BEST Way

var myList  = $("#myList");

myList.click( function() {
   myList.hide();  // No need to re-select #myList since we cached it
});