Jquery elemento + selector de clase rendimiento

Question

Esperaba $('#childDiv2 .txtClass') o $('#childDiv2 input.txtClass') funcionan mejor al seleccionar elemento <input type="text" id="txtID" class="txtClass"/>. Pero de acuerdo con esto performance analysis$('.txtClass'); es el mejor selector entre esto. Estoy usando JQuery 1.7.2 ¿Alguien tiene una explicación para esto?

HTML

<div class="childDiv2"> 
    <input type="text" id="txtID" class="txtClass"/> 
    <p class="child">Blah Blah Blah</p> 
</div>​ 

JS

$('.txtClass'); 
$('#childDiv2 .txtClass') 
$('#childDiv2 > .txtClass') 
$('input.txtClass') 
$('#childDiv2 input.txtClass') 

Answer 1

navegadores modernos exponen un método muy eficiente getElementsByClassName() que devuelve los elementos que tienen una clase dada. Es por eso que un solo selector de clase es más rápido en su caso.

dar más detalles sobre sus ejemplos:

$(".txtClass")     => getElementsByClassName() 

$("#childDiv2 .txtClass")  => getElementById(), 
            then getElementsByClassName() 

$("#childDiv2 > .txtClass")  => getElementById(), 
            then iterate over children and check class 

$("input.txtClass")    => getElementsByTagName(), 
            then iterate over results and check class 

$("#childDiv2 input.txtClass") => getElementById(), 
            then getElementsByTagName(), 
            then iterate over results and check class 

Como se puede ver, es bastante lógico para la primera forma de ser el más rápido en los navegadores modernos.

Answer 2

Los selectores CSS se analizan de derecha a izquierda. Entonces su ejemplo

$('#childDiv2 .txtClass') 

tomará dos acciones para completar. Primero busca todos los elementos con la clase txtClass. A continuación, compruebe cada elemento para ser un elemento secundario del elemento con el id childDiv2.

$('.txtClass') 

Este selector solo realizará una acción. Encuentra todos los elementos con la clase txtClass

un vistazo a this article en css-tricks.com

Answer 3

var obj = document.getElementById("childDiv"); 
xxx = obj.getElementsByClassName("txtClass"); 

es 30 veces más rápido.

http://jsperf.com/selectors-perf/6

Answer 4

parece que también depende de la densidad de los elementos con la clase entre los elementos del tipo.

Ejecuté las pruebas con la versión 30.0.1599.69 de Google Chrome usando JQuery 1.10.1. No dude en probarlo en otro navegador y/o utilizando otra versión de JQuery.

Me trataron de ejecutar las siguientes pruebas:

1. Disperso (10% de los divs tiene la clase) link to the test on jsbin

2. denso (el 90% de los divs tiene la clase) link to the test on jsbin

Parece que en los casos densodiv.class victorias, pero en el Caso disperso.class gana.