Насколько конкретным должен быть селектор?

Question

У меня есть общий вопрос о jQuery.Допустим, у меня есть следующий код:

<div id="container">
    <ul>
        <li>1</li>
        <li class="target">2</li>
        <li>3</li>
    </ul>
</div>

Какой самый лучший и быстрый способ выбрать элемент target?

$('div#container ul li.target')

или

$('#container .target')

или

$('li.target')

или это еще быстрее:

$('.target')

Я хочу знать, как лучше всего достичь этого?Вы можете сказать, что чем конкретнее, тем лучше, но слишком конкретное замедлит процесс, я думаю.Также метод class «медленнее», но эта разница уже не так велика, или я ошибаюсь?

Answer 1

Для этого примера $('.target') самый быстрый.JQuery выяснил алгоритмы обхода;)

Доказательство: http://jsperf.com/jquery-selector-speed-tests

Answer 2

• Идентификаторы не нуждаются в дополнительных дескрипторах.#id лучше, чем div#id.
• Sizzle обычно работает справа налево (очевидно, когда слева идёт контекст id, он сначала ищет его), поэтому лучше быть более точным справа(так что остается меньше результатов и меньше второстепенных проверок).Однако в современных браузерах реализация querySelectorAll может не сработать, поэтому трудно сказать.

В целом это сложно сказать, и по большей части изменения будут микрооптимизациями.,Сколько выборов вы делаете в любом случае, что это имеет такое значение?Что еще более важно, если вы выполняете медленно, вы профилировали его и выяснили, где находится узкое место?Если нет, то вы, вероятно, сжимаете очень сильно и не собираетесь получать много лимонного сока из этого.

Наконец, вам нужно понять, сколько jsperfs или других тестов, которые люди бросают в вас, этобезрезультатно для общего случая.Это все зависит от конкретного случая.Может быть, ваша DOM проста, может быть, в будущем это будет сложнее.Вам нужно проверить свой случай.Другой ответ связан с решением, с выводом которого я полностью не согласен.Там, DOM имеет 4 элемента, в реальном случае он может иметь 4000, что означает, что все ставки выключены.

Answer 3

http://jsperf.com/jquery-selector-speed-tests/3

Если вы проверите это в IE7, вы обнаружите, что подсказка $(.target) там неверна. Вы хотите оптимизировать браузер, который, на мой взгляд, поддерживает худший браузер, что означает, что $('#container').find('.target') на самом деле быстрее текущей рекомендации.

Редактировать: http://jsperf.com/jquery-selector-speed-tests/7 показывает, что во многих случаях .target не будет достаточно, поскольку вам потребуется более конкретный контекст.

Answer 4

В новых браузерах это не имеет значения, они все одинаковые, но в старых браузерах это:

$('#container li.target');

Мне кажется, лучше.#Container напрямую определяется с помощью getElementById(), затем для li используется getElementsByTagName(), и, наконец, jquery вручную проверяет класс .target на результатах.

Answer 5

Ну, это зависит от ситуации, чего вы пытаетесь достичь.

Хорошо, если вы используете селектор, подобный этому [id * = 'someid'], jQuery будет искать в полном DOM, который соответствует конкретному селектору. Так что это займет много времени. Я обычно решаю эту проблему, добавляя класс (который является уникальным) для этого конкретного элемента, или я должен быть уверен, что смогу получить элемент через идентификатор.

Другой пример, если вы собираетесь использовать несколько селекторов (что касается вашего вопроса), он будет читать каждый выбранный вами выбор в вашем селекторе. Возьмем, к примеру, первое:

$('div#container ul li.target')

Сначала jQuery будет соответствовать каждому div с контейнером id. После этого в каждом контейнере jQuery будет искать список UL. После этого он будет искать LI с целью класса. В этой конкретной ситуации он будет читать 3 раза через DOM (но все еще в меньшем подмножестве, и не забывайте, что он читает сверху вниз).

Итак, на основании этого объяснения последнее

$('.target')

Будет самым быстрым. Зачем? jQuery должен найти в DOM один раз, соответствующий селектору.