Селекторы jQuery - в порядке скоростей

#jquery #performance #selector

#jquery #Производительность #селектор

Вопрос:

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

Я хочу составить окончательный список самых быстрых способов выбора элементов в jQuery

Насколько я понимаю, если бы у меня было следующее

 <body>
  <div id="container">
    <ul class="count">
      <li>One</li>
      <li>Two</li>
      <li class="selected">Three</li>
    </ul>
  </div>
</body>

В порядке скорости (от самой быстрой к самой медленной)
Выбор по идентификатору:

 $('#container')

Выбор по элементу:

 $('div')

Выберите по классу с помощью элемента

 $('ul.count')

Выберите по части идентификатора элемента с помощью элемента (в данном случае заканчивается на)

 $("div[id$='tainer']")

Выбор по классу

 $('.count')

Выберите по части идентификатора элемента (в данном случае заканчивается на)

 $("[id$='tainer']")

Это в правильном порядке скорости и я пропустил что-нибудь?

Спасибо

1. где выбирается по элементу с помощью класса и идентификатора?

2. возможно, вы найдете счастье с сайтом jsperf . Например, этот тест хорош, а этот превосходен! но лучше всего вы можете написать свой собственный 😉

3. Поиск по идентификатору не может быть сверху. Если вы примените контекст элемента к селектору как $(‘#myTxtBox’,’#divContainer’), он будет выделяться на вершине.

Ответ №1:

производительность селекторов зависит от нескольких факторов. браузер является основным фактором, с шипением / querySelectorAll / jsengine и версией jquery, которые их используют. В принципе, jquery улучшает производительность в каждой версии и хорошо справляется с выбором наилучшего доступного метода в зависимости от браузера.

Любые обновления в браузере, движке js или самом jquery могут вызвать новый метод «наилучшего исполнения». Более того, в зависимости от размера и глубины данных метод может внезапно стать быстрее другого. И это не говоря уже о самом запросе. например, $(‘#id .class’) может не использовать тот же «движок», что и $(‘#id’).find(‘.class’) .

В целом, это не проблема, jquery достаточно оптимизирован. Когда я натыкаюсь на проблемы с производительностью, это никогда не связано с селекторами (но с .append(), большими, не делегированными событиями или плагинами и в целом: мое старое плохое кодирование).

если вам действительно, действительно нужна производительность в dom, вам нужно сравнить производительность с document.getElementById (если у вас есть идентификатор для его использования) и собственный document.querySelectorAll’, который, кажется, является самым быстрым методом месяца.

Ответ №2:

вы должны посмотреть на это: в середине документа)

это может быть вычислено до значения

http://css-tricks.com/855-specifics-on-css-specificity/