Производительность CSS / jQuery - лучше ли предоставлять селектор с более высоким разрешением

Question

Скажем, я выбираю элемент DOM с помощью CSS или jQuery, быстрее ли обеспечить более высокое разрешение?

То есть я пытаюсь выяснить, какой из следующих методов выбора jquery является лучшим с точки зрения скорости:

Method 1. $("#name")
Method 2. $("input#name")
Method 3. $("div input#name")

Или эти селекторы CSS:

Method 1. #name {font-weight: bold;}
Method 2. input#name {font-weight: bold;}
Method 3. div input#name {font-weight: bold;}

Кажется, что Method 3 может облегчить работу селектора, так как он может сузиться до элемента быстрее?

Answer 1

Учитывая эти операторы jQuery

Method 1. $("#name")
Method 2. $("input#name")
Method 3. $("div input#name")

, все три оператора одинаково хороши, поскольку id всегда должно быть уникальным значением. Так что $("#name") совпадает с $("div input#name"), если у dom нет нескольких полей с одинаковым идентификатором

Теперь, учитывая строки CSS, это зависит от специфики.

#name { color: red; }
input#name { color: yellow; }
div input#name { color: green; }

<div>
  <input id='name'>
</div>

Answer 2

Я думаю, что чем меньше селектор, тем лучше производительность. Я смутно помню где-то читал, что селекторы оцениваются справа налево. Таким образом, последний вспомогательный селектор оценивается первым, а результирующий список будет сжат при перемещении влево. Если вы беспокоитесь об определенном экземпляре, вы всегда можете проверить производительность этого конкретного экземпляра, измерив время между до и после querySelctorAll() или $(), передав возможные селекторы и увидев его самостоятельно.