Лучшая производительность для jQuery Selector

Question

Получает и сохраняет цвет фона конкретной ссылки:

var origColor = $("ul.relatedAlbums li a").css("background-color");

Но таких ссылок много, и я чувствую, что это неэффективно. Я предполагаю, что есть способ заставить запрос селектора остановиться после первого совпадения и, таким образом, сэкономить время обработки. Вот как я себе это представляю:

var origColor = $("ul.relatedAlbums li a:first").css("background-color");

Это правильный / эффективный способ сделать это? Люди говорят, что использование псевдо-классов css медленное, но я не уверен, применимо ли это. Это просто тот же синтаксис, верно?

Answer 1

Как бы странно это ни звучало, я получаю "a: first" постоянно быстрее в Safari и Firefox, и медленнее в Chrome и Opera на , эти тесты . Однако эти результаты относятся к почти 12 000 ссылок на странице, поэтому миллисекунду здесь или там не стоит тянуть за волосы.

Safari

альтернативный текст http://tinyurl.com/27polne

Firefox

альтернативный текст http://tinyurl.com/2ay56yr

Chrome

альтернативный текст http://tinyurl.com/248nurm

Opera

альтернативный текст http://tinyurl.com/254unwc

<ч />

Чтобы действительно оптимизировать это, вы никогда не должны выбирать все ссылки. Присвойте уникальный идентификатор первой ссылке и получите доступ только к этому. Вот новый тест с поиском по одному элементу, и он разбивает другие методы из пропорции. Излишне говорить, что это, очевидно, будет очень быстро, но это всего лишь сравнение того, насколько быстрее.

ОК, я не могу удержаться от добавления jQuery стиль производительность чисел с его 1,0 дней:)

Safari (на 112 000% быстрее)

альтернативный текст http://tinyurl.com/2b2w2fc

Firefox (на 30 000% быстрее)

альтернативный текст http://tinyurl.com/25xjzs4

Chrome (на 24 000% быстрее)

альтернативный текст http://tinyurl.com/28w9fgq

Opera (на 38 000% быстрее)

альтернативный текст http://tinyurl.com/27lsz2u

Установка:

• OS : OS X 10.5.8
• Опера : 10.10, сборка 6795
• Chrome : 5.0.375.70
• Safari : 4.0.5 (5531.22.7)
• Firefox : 3.6.4

Answer 2

Вам не нужен :first, потому что метод css просматривает только атрибут первого элемента в наборе соответствующих элементов.

http://api.jquery.com/css/
css (propertyName)

Получить значение свойства стиля для первого элемента в наборе соответствующих элементов.

Answer 3

Механизм выбора jQuery обрабатывает селектор :first, сначала ища ul.relatedAlbums li a, а затем применяя фильтр ко всем соответствующим элементам.Хотя этот фильтр довольно короткий:

first: function(elem, i){
  return i === 0;
}

, он все равно генерирует вызов функции для КАЖДОГО элемента в селекторе.

Метод .css(prop) вернет jQuery.curCSS(elems[0], prop).Таким образом, селектор :first - это просто потеря производительности.

Answer 4

Я не думаю, что: первый селектор будет вам дорого стоить.

Один из лучших способов повысить производительность с помощью селектора - это использовать необязательный параметр context с селектором id.

Примерно так ...

var origColor = $("ul.relatedAlbums li a", "#surroundingDiv").css("background-color");

Этот 2-й селектор контекста фактически указывает движку jQuery сначала выполнить поиск в DOM #surroundingDiv.И затем эти результаты сужаются дальше с первым селектором.

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

Answer 5

, что сказал RamboNo5, но если вы хотите редактировать цвет фона только для первого элемента, вы можете использовать

var origColor = $("ul.relatedAlbums li a:first").css("background-color", "red");

, как вы сказали, но я думаю, вы также можете использовать

var origiColor = $("ul.relatedAlbums li").first().css("background-color", "red");

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

посмотрите на: - api.jquery.com/first-selector/ - http://api.jquery.com/first/ для получения дополнительной информации