Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 31
>> Однако, если есть необходимость использовать фильтры по каким-либо атрибутам (:visible, :eq и т.д.) и селектор выглядит так, то фильтр будет применён в последнюю очередь
На самом деле $('.el:first') предпочтительнее $('.el'), если нам нужен только первый найденный элемент, даже если он единственный. Как я понимаю, при нахождении первого элемента, дальнейший перебор сокращается. Это немного ускоряет такие куски, если элементов много
$('.elements').each(function(){
$(this).attr('rel', $(this).find('.value:first'));
});
Еще ускорить можно, заменив $.each() на for(;;){} и убрав двойное $(this)
На самом деле $('.el:first') предпочтительнее $('.el'), если нам нужен только первый найденный элемент, даже если он единственный. Как я понимаю, при нахождении первого элемента, дальнейший перебор сокращается. Это немного ускоряет такие куски, если элементов много
$('.elements').each(function(){
$(this).attr('rel', $(this).find('.value:first'));
});
Еще ускорить можно, заменив $.each() на for(;;){} и убрав двойное $(this)
Спасибо, не знал про валидные селекторы. При том, что код я пишу валидный, выбираю элементы не правильно.
Полезная статья, плюс вам!
Полезная статья, плюс вам!
В код статьи добавьте, пожалуйста, линк на .querySelectorAll
и неплохо бы провести бенчмарк
и неплохо бы провести бенчмарк
да, чувак! побольше бы таких статей! огромное программистское спасибо! искать такие тонкости невероятно сложно, а тут все на тарелочке!) супер!
кстати, в опере querySelector[All] тоже работает
$('#divs .my_class') — увы, такие конструкции тоже могут ощутимо тормозить, хотя, как написано, и должен сперва искаться id.В таких случаях рекомендуют следующую оптимизацию:
$('#div').find('.my_class')
Пару замечаний —
Исправьте опечатки (фунционально, селетор и т.д.).
не валидное в валидное.
getElementByTagName -> getElementsByTagName
getElementByClass -> getElementsByClassName
Контекст, не дает выигрыша в производительности с qSA, но он есть без его использования.
ejohn.org/blog/thoughts-on-queryselectorall/, поэтому, ваше выражение в jquery, будет выглядить так —
Только оно эквивалентно выражению —
Исправьте опечатки (фунционально, селетор и т.д.).
$('#my_form input[type=«hidden»]')Оба селектора будут использовать qSA, во втором случае sizzle перепишет
$('#my_form input[type=hidden]')
не валидное в валидное.
getElementByTagName -> getElementsByTagName
getElementByClass -> getElementsByClassName
В большинстве случаев их хватает, но (sic!) в IE7 getElementByClass() поломана и использование селектора по классу приведёт к польному перебору элементов в этом браузере.getElementsByClassName, был добавлен только в девятом ie (sic!).
Контекст, не дает выигрыша в производительности с qSA, но он есть без его использования.
$('.divs', document.getElementById('wrapper'));В спецификации querySelectorAll есть своеобразный баг —
document.getElementById('wrapper').querySelectorAll('.divs'); // при наличии возможности использовать querySelectorAll()
ejohn.org/blog/thoughts-on-queryselectorall/, поэтому, ваше выражение в jquery, будет выглядить так —
document.getElementById('wrapper').querySelectorAll('#wrapper .divs');$('.child', $('.root')[0]); // использование контекста не облегчит поискОблегчит.
$('.root').children('.child'); // самый правильный вариантЭто не самый правильный вариант, это единственно правильный вариант.
Только оно эквивалентно выражению —
$('.root > .child')
про баг с qSA() не знал.
$('.root').children('.child'); не эквивалентно $('.root > .child'); — посмотрю сегодня сам код
$('.root').children('.child'); не эквивалентно $('.root > .child'); — посмотрю сегодня сам код
должно быть эквивалетно. .childre() берет только первый уровень детей. если надо копать глубже, есть .find()
Давайте разберёмся:
Результат селекторов будет эквивалентен, однако путь получения — нет (смотреть тут):
— для $('.root > .child');
В результате оно отлично-то возьмёт всех детей первого уровня, но через дополнительные проверки и пару промежуточных функций :)
Результат селекторов будет эквивалентен, однако путь получения — нет (смотреть тут):
— для $('.root > .child');
var Expr = Sizzle.selectors = {
...
relative: {
...
">": function( checkSet, part ) {
...
Sizzle.filter( part, checkSet, true ); // тут обрабатывается магия ">"
...
}
...
}
...
}
// А вот метод .children()
children: function( elem ) {
return jQuery.sibling( elem.firstChild );
}
sibling: function( n, elem ) {
var r = [];
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
return r;
}
В результате оно отлично-то возьмёт всех детей первого уровня, но через дополнительные проверки и пару промежуточных функций :)
«приведёт к польному перебору „
Работает данная функция не во всех браузерах, а только в FF 3.1+, IE8+ (только в стандартном режиме IE8), и Safari 3.1+А «Оперу» почему не включили в этот список? Она тоже поддерживает эти вызовы.
Есть ещё заготовка о событиях в jQuery (более обстоятельная, с выдержками из кода). Coming soon
>Заменяйте подчинённости внутри селекторов на подзапросы (.children(...) и т.д.)
это очень плохо затачивать код под старые браузеры. читаемость падает, скорость для новых браузеров тоже просядет из-за лишних телодвижений.
это очень плохо затачивать код под старые браузеры. читаемость падает, скорость для новых браузеров тоже просядет из-за лишних телодвижений.
Как мы знаем — разбор селектора и поиск начнётся со всех .child элементов на странице (при условии, что querySelectorAll() недоступно). Такая операция достаточно затратна и мы можем трансформировать селектор так:
$('.child', $('.root')[0]); // использование контекста не облегчит поиск
$('.root').find('.child'); // а зачем нам перебор всех элементов внутри .root?
$('.root').children('.child'); // самый правильный вариант
Почему перебор всех элементов .root на странице — менее затратная операция, чем перебор всех элементов .child на странице?
Немного в тему: Why is getElementsByTagName() faster that querySelectorAll()?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Используем быстрые селекторы для jQuery