jQuery, что быстрее: селекторы или методы?

Question

Допустим, у меня есть $('mySelector:first'); и $('mySelector').first();.Какой способ наиболее эффективен?Я посмотрел на источник, но все еще не мог понять.

Похоже, что в первом случае jQuery просматривает каждый элемент, пока не получит первый:

CHILD: function( elem, match ) {
        var type = match[1],
        node = elem;
        switch ( type ) {
            ...
         case "first":
          while ( (node = node.previousSibling) )  {
           if ( node.nodeType === 1 ) { 
            return false; 
           }
          }
          if ( type === "first" ) { 
           return true; 
          }
          node = elem;
                ...
        }
}

Во второмcase jQuery разрезает коллекцию, но я не уверен, насколько она эффективна:

function first() {
  return this.eq( 0 );
};

function eq( i ) {
  return i === -1 ?
    this.slice( i ) :
    this.slice( i, +i + 1 );
};

Answer 1

Текущий принятый ответ не согласуется с тестами во многих браузерах , сравнивающими :first и :eq(0) с .first() и .eq(0).

Для текущих основных браузеров настольных компьютеров:
$('foo').first() почти в четыре раза быстрее, чем $('foo:first')

Если вы хотите проверить методологию, вот тесты и их текущие результаты .

Answer 2

Второй должен получить все предметы в селекторе, прежде чем получить первый.Таким образом, если селектор был 10 000 элементов, он выбрал бы все 10 000, а затем первый из этой группы.Я надеюсь, что первое будет лучше в этом отношении, так как оно будет фильтровать при поиске (и останавливаться после того, как будет найдено первое).Хотя в большинстве случаев это, вероятно, тривиально.

Конечно, если вы объединяете функции, это может быть неизбежным:

$('.someclass').addClass('otherClass').first().addClass('firstClass');

Answer 3

Сравните $('li:first') с $('li').first(), держу пари, первое должно быть быстрее.Поскольку, например, в документе, содержащем 100 li , второй запрос просто создает список из 100 элементов, а затем возвращает первый из него;с другой стороны, первый запрос будет остановлен сразу после возвращения первого li.

Даже если запрос обрабатывается браузером изначально, он все равно занимает больше памяти, чем первый.

Answer 4

В моих тестах $('mySelector:first'); быстрее , чем $('mySelector').first();

Вас также может заинтересовать this ;