JQuery: $('# id tag') против $('# id'). find ('tag') - что предпочтительнее?

Я хочу знать, какой вариант лучше, особенно с точки зрения их скорости:

$('#id tag')...

или

$('#id').find('tag')...

Кроме того, применил бы тот же ответ, если вы измените id и/или tag на, скажем, class или что-то вроде input:checked?

Например, что лучше: $('#id input:checked')... или $('#id').find('input:checked');?

ОТВЕТЫ

Ответ 1

Вы можете основывать свое решение на 3 вещах:

читаемость

Это не сильно отличается от ваших двух выбранных селекторов. Со своей стороны, я предпочитаю синтаксис $('#id').find('inner'), потому что он более точно описывает, что он на самом деле делает.

Многократное использование

Если у вас есть другие части вашего кода, используйте один и тот же селектор id (или что-то в его контексте), вы можете кэшировать селектор и повторно использовать его. Мне самому сложнее реорганизовать код, который был написан как этот $('#id inner'), потому что вы должны сначала декодировать селектор css, прежде чем сможете двигаться дальше и находить возможные улучшения.

Представьте себе эти два случая с небольшой сложностью

$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();

И в другом случае

$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();

Думаю, второй пример кричит на вас "Cache the id selector", а первый - нет.

Speed ​​

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

Здесь хороший тест производительности, если вы хотите узнать больше о производительности селекторов контекста-vs в jQuery. Подмножества идентификаторов обычно действуют. Конечно, вы можете получить разные результаты, но в большинстве случаев они это делают.

Итак, от 3 до 0 для селекторов подмножества с моей точки зрения.

Ответ 2

Здесь тестовый код HTML, где я ищу все элементы span в элементе #i:

<div id="i">
  <span>testL1_1</span>
  <span>testL1_2</span>
  <div>
    <span>testL2_1</span>
  </div>
  <ul>
    <li>
      <span>testL3_1</span>
    </li>
  </ul>
  <div>
    <div>
      <div>
        <div>
          <span>testL5_1</span>
        </div>
      </div>
    </div>
  </div>
</div>

Тестирование этих трех селекторов jQuery:

$("#i span");         // much slower
$("#i").find("span"); // FASTEST
$("span", "#i");      // second fastest

http://jsperf.com/jquery-sub-element-selection

Я запустил его в Google Chrome и Firefox, и кажется, что .find() является самым быстрым, за которым следует третий случай и намного медленнее первый.

jQuery selector performance

Ответ 3

Показатель производительности здесь: :) == > http://jsperf.com/find-vs-descendant-selector

Кажется, что descendant путь быстрее, но плохо работает в опера,

anyhoo, по моему мнению, не имеет значения :)

Надеюсь, что это отвечает на ваш вопрос и видит здесь Является ли .find() быстрее, чем метод выбора базового потомка?

Ответ 4

Потомок работает лучше. проверьте эту ссылку Jsperf.

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

Ответ 6

Похоже, что первый $("#id tag") значительно медленнее второго ($("#id").find("tag")) в современных браузерах; test здесь, см. снимок экрана ниже. IE7 (которому не хватает querySelectorAll) запускает их примерно с одинаковой скоростью.

Но два наблюдения:

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

  • Синтетические тесты всегда подозрительны. Если вы боретесь с фактической известной проблемой производительности, это профиль (ваш фактический селектор и фактическая разметка).

Results screenshot