Лучшая Производительность для Селектора jQuery
Это получает и хранит цвет фона определенной ссылки:
var origColor = $("ul.relatedAlbums li a").css("background-color");
Но существует много тех ссылок, и я получаю чувство, что это неэффективно. Я предполагаю, что существует способ сказать селекторному запросу остановиться после первого соответствия и таким образом сохранить на времени обработки. Вот то, как я предполагаю делать это:
var origColor = $("ul.relatedAlbums li a:first").css("background-color");
Действительно ли это - право / эффективный способ сделать это? Люди говорят, что с помощью CSS псевдо классы являются медленными - но я не уверен, применяется ли это. Это просто имеет тот же синтаксис, который является правильным?
5 ответов
Вам не нужен : first , потому что css-метод смотрит только на атрибут первого элемента в наборе совпадающих элементов.
http://api.jquery.com/css/
css (propertyName)
Получить значение свойства стиля для первый элемент в наборе согласованные элементы.
Как бы странно это ни звучало, я получаю "a:first" последовательно быстрее в Safari и Firefox, и медленнее в Chrome и Opera в этих тестах. Однако эти результаты получены для почти 12 000 ссылок на странице, так что миллисекунда здесь или там не стоит того, чтобы вырывать волосы.
Safari
alt text http://tinyurl.com/27polne
Firefox
alt text http://tinyurl.com/2ay56yr
Chrome
alt text http://tinyurl.com/248nurm
Opera
alt text http://tinyurl.com/254unwc
Чтобы действительно оптимизировать это, вы никогда не должны выбирать все ссылки. Присвойте уникальный идентификатор первой ссылке и обращайтесь только к ней. Вот новый тест с поиском одного элемента, и он перечеркивает все остальные методы. Нет нужды говорить, что это, очевидно, будет очень быстро, но это просто сравнение того, насколько быстрее.
ОК, не могу удержаться и не добавить jQuery style performance numbers из его 1.0 дней :)
Safari (112,000% быстрее)
alt text http://tinyurl.com/2b2w2fc
Firefox (30,000% быстрее)
alt text http://tinyurl. com/25xjzs4
Chrome (на 24 000% быстрее)
alt text http://tinyurl.com/28w9fgq
Opera (на 38 000% быстрее)
alt text http://tinyurl.com/27lsz2u
Настройка:
- OS: OS X 10.5.8
- Opera: 10.10, build 6795
- Chrome: 5.0.375.70
- Safari: 4.0.5 (5531.22.7)
- Firefox: 3.6.4
то, что сказал 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/
для дополнительной информацииНе думаю, что селектор: first много вам даст.
Один из лучших способов повысить производительность с помощью селектора - использовать необязательный параметр контекста с селектором id.
Что-то вроде этого ...
var origColor = $("ul.relatedAlbums li a", "#surroundingDiv").css("background-color");
Этот второй селектор контекста фактически указывает механизму jQuery сначала искать в DOM #surroundingDiv. А затем эти результаты еще больше сужаются с помощью первого селектора.
Поскольку селекторы id являются самыми быстрыми из всех селекторов, этот метод может иногда удваивать производительность в зависимости от относительного размера контекста по сравнению с остальной частью DOM.
Селекторный механизм jQuery обрабатывает селектор :first, сначала ища ul.relatedAlbums li a, затем применяя фильтр ко всем совпадающим элементам. Хотя этот фильтр довольно короткий:
first: function(elem, i){
return i === 0;
}
он все равно генерирует вызов функции для КАЖДОГО элемента в селекторе.
Метод .css(prop) вернет jQuery.curCSS(elems[0], prop). Таким образом, селектор :first является просто бесполезным с точки зрения производительности.