jQuery: ¿Agregar contexto a un selector es mucho más rápido que refinar su selector?

Question

Acabo de notar que agregar contexto al selector es mucho más rápido que refinar su selector.

$('li',$('#bar')).append('bla');

es dos veces más rápido que:

$('#bar li').append('bla');

¿Es esta generalmente verdad?

Answer 1

añadiendo contexto al selector es mucho más rápido que refinar su selector de

Esto es cierto en el caso general. Con respecto a sus ejemplos específicos, sin embargo, no es necesariamente cierto para jQuery < = 1.2.6.

Hasta e incluyendo jQuery 1.2.6 el motor selector funcionaba de manera "descendente" (o "de izquierda a derecha"). Lo que significa que tanto sus ejemplos operarían como esto (aproximadamente):

var root = document.getElementById('bar'); 
return root.getElementsByTagName('li'); 

jQuery 1.3.x (es decir, Sizzle, que incrusta jQuery) introduced a "bottom up" (or "right to left") approach a la consulta de la DOM. Así $('#bar li') ahora se convierte en (más o menos):

var results = []; 
var elements = document.getElementsByTagName('li'); 
for(var i=0; i < elements.length; i++) { 
    var element = elements[i]; 
    var parent = element.parentNode; 
    while(parent) { 
     if(parent.id == 'bar') { 
      results.push(element) 
      break; 
     } 
     parent = parent.parentNode; 
    } 
} 
return results 

Hay ventajas y desventajas de ambos enfoques. Encontraste uno de los inconvenientes.

Editar: se acaba de enterar de que this discussion chisporroteo tronco ahora hace una exención especial de selectores donde #id es primero. Utiliza eso como el contexto raíz, acelerando un poco las cosas. Esto debería disminuir si no elimina las diferencias de velocidad que está viendo.