jQuery ¿qué es más rápido: selectores o métodos?

Question

Digamos que tengo $('mySelector:first'); y $('mySelector').first();. ¿Cuál es la forma más eficiente? Miré en la fuente, pero todavía no podía entenderlo.

Parece que en el primer caso jQuery pasa a través de cada elemento hasta que consigue la primera:

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; 
       ... 
     } 
} 

En segundo caso rebanadas jQuery la colección, pero no estoy seguro de qué tan eficiente es:

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

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

Answer 1

la respuesta aceptada actual no es consistente con tests across many browsers comparando :first y :eq(0)-.first() y .eq(0).

para los principales navegadores de escritorio actuales:
$('foo').first() es casi cuatro veces más rápido que $('foo:first')

Si desea inspeccionar la metodología, here are the tests and their current results.

Answer 2

En mis pruebas, $('mySelector:first'); es más rápido que$('mySelector').first();

Usted puede un También estar interesado en this;

Answer 3

Comparar $('li:first') a $('li').first(), apuesto a que el primero debe ser más rápido. Porque, por ejemplo, en un documento que contiene 100 li, la segunda consulta simplemente crearía una lista de 100 elementos y luego, devolvería la primera; por otro lado, la primera consulta se detendrá justo después de que se devuelva el primer li.

Incluso la consulta se maneja de forma nativa en el navegador, aún requiere más memoria que la primera.

Answer 4

El segundo debería obtener TODOS los elementos en el selector antes de obtener el primero. Entonces, si el selector tuviera 10,000 elementos, obtendría los 10,000 y luego el primero de ese grupo. Espero que el primero sea mejor a este respecto, ya que se filtraría a medida que busca (y se detendrá después de que se haya encontrado el primero). Sin embargo, probablemente trivial en la mayoría de los casos.

Por supuesto, si está encadenando funciones, entonces puede ser inevitable:

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