jQuery: l'aggiunta di contesto a un selettore è molto più rapida del perfezionamento del selettore?

Question

Ho appena notato che aggiungere contesto al selettore è molto più rapido del perfezionamento del selettore.

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

è due volte più veloce rispetto:

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

È questo il vero in generale?

Answer 1

aggiungendo contesto al selettore è molto più veloce rispetto perfezionare il vostro selettore

Questo è vero nel caso generale. Per quanto riguarda i tuoi esempi specifici, tuttavia, non è necessariamente vero per jQuery < = 1.2.6.

Fino al jQuery 1.2.6 incluso, il motore del selettore funzionava in modo "dall'alto verso il basso" (o "da sinistra a destra"). Il che significa che entrambe le esempi operare in questo modo (più o meno):

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

jQuery 1.3.x (vale a dire, Sizzle, che incorpora jQuery) introduced a "bottom up" (or "right to left") approach per interrogare il DOM. Così $('#bar li') ora diventa (più o meno):

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 

Ci sono vantaggi e svantaggi di entrambi gli approcci. Hai trovato uno dei lati negativi.

Edit: appena scoperto da this discussion quel tronco Sizzle rende ora una deroga speciale di selettori dove #id è il primo. Lo usa come contesto di root, accelerando un po 'le cose. Questo dovrebbe diminuire se non eliminare le differenze di velocità che stai vedendo.