jquery, per quanto riguarda le prestazioni, quale è più veloce getElementById o selettore jquery?

Question

Cosa c'è di meglio nelle prestazioni document.getElementById('elementId') o $('#elementId')? Come posso calcolare la velocità da solo?

Answer 1

Se siete preoccupati per le prestazioni, nativo getElementById è molto molto più veloce, ma jQuery offre un accesso molto comodo per un sacco di roba. Quindi, si potrebbe desiderare di usare qualcosa come:

$(document.getElementById("some_id")).jQueryCall(); 

Questo vi darà una migliore performance, e, allo stesso tempo, permetterà di utilizzare jQuery.

Answer 2

getElementById è più veloce, perché utilizza il codice nativo. Il selettore jQuery utilizzerà anche getElementById, ma prima deve eseguire molti test e confronti sul testo.

Answer 3

Ovviamente getElementById è più veloce ma con jQuery puoi fare un sacco di cose.

Per verificarlo, è possibile provare a eseguire il ciclo di 10 k per volta e confrontare i timestamp prima e dopo.

Answer 4

Il getElementById nativo è più veloce. Il motore di selezione di Jquery lo avvolge per qualsiasi selettore #x.

Utilizzando la console firebug è possibile creare un profilo di jquery nel modo seguente. Non è sicuro che funzioni bene per le chiamate API native come getElementById.

console.profile(); 
$('#eleId'); 
console.profileEnd(); 

Answer 5

Usa http://jsperf.com/ se si vuole testare qualsiasi tipo di prestazioni tra jQuery e dom ma jQuery è normalmente più lento con tutto quanto si basa sul DOM.

Answer 6

Mi sono appena imbattuto in questo post mentre mi chiedevo la stessa domanda ... così ho deciso di fare un rapido script di test ... eseguilo, provalo tu stesso, mi ha fatto impazzire!

var now = Date.now(); 
var diff = 0; 
console.log(now); 

for(var i=0; i < 1000000; i++) 
{ 
    if($(document.getElementById("test")).css('opacity') == '0.2') 
     $(document.getElementById("test")).css('opacity', '1'); 
    else 
     $(document.getElementById("test")).css('opacity', '0.2'); 
} 

diff = Date.now() - now; 
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now2 = Date.now(); 
var diff2 = 0; 
console.log(now2); 

for(i=0; i < 1000000; i++) 
{ 
    if($("#test").css('opacity') == '0.2') 
     $("#test").css('opacity', '1'); 
    else 
     $("#test").css('opacity', '0.2'); 
} 

diff2 = Date.now() - now2; 

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now3 = Date.now(); 
var diff3 = 0; 
var elem = $("#test"); 
console.log(now3); 

for(i=0; i < 1000000; i++) 
{ 
    if(elem.css('opacity') == '0.2') 
     $(elem).css('opacity', '1'); 
    else 
     $(elem).css('opacity', '0.2'); 
} 

diff3 = Date.now() - now3; 

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds'); 

Dopo l'esecuzione di questo script, ho ottenuto i seguenti risultati:

Run 1

Con $(document.getElementById("test")).somejQueryCall(): 552 millisecondi

Con $("#test").somejQueryCall(): 881 millisecondi

Con $(elem).somejQueryCall() : 1317 millisecondi

Run 2

Con $(document.getElementById("test")).somejQueryCall(): 520 millisecondi

Con $("#test").somejQueryCall(): 855 millisecondi

Con $(elem).somejQueryCall(): 1289 millisecondi

Run 3

Con $(document.getElementById("test")).somejQueryCall(): 565 millisecondi

Con $("#test").somejQueryCall(): 936 millisecondi

Con $(elem).somejQueryCall(): 1445 millisecondi

Non posso credere che la differenza !!! Dovevo solo condividere questo!

Pace!

Answer 7

Heh. Alla ricerca di questa domanda ho trovato questo post eccellente. E anche un post su questo con l'ultimo nel sito di apprendimento di JQuery con suggerimenti specifici per ottimizzare la velocità!

Vale la pena notare che con le ultime specifiche DOM, è probabile che non ci si debba preoccupare delle prestazioni in generale. Solo quando hai creato (o scopri) un collo di bottiglia.

Optimise Selectors

Answer 8

Dal momento che l'altro test di performance che è stata legata a questa pagina sembrava essere rotto, e comprendeva anche qualcosa che non è stato chiesto a questa domanda (vale a dire un metodo di jQuery personalizzato), quindi ho deciso per fare un nuovo punto di riferimento delle prestazioni per rispondere alla domanda, che comprende l'esatto equivalente (restituisce l'elemento DOM) in jQuery, invece di un metodo personalizzato:

https://jsperf.com/jquery-get-0-vs-get-element-by-id

Quando eseguo nel mio Chrome, mostra che una scala jQuery

$('#foo').get(0) 

è del 92% più lento rispetto l'operazione equivalente in JavaScript standard

document.getElementById('foo') 

Ho anche provato ciò che è attualmente contrassegnato come la risposta accettata qui, che presumibilmente "molto molto più veloce", ma è ancora 89 % più lento rispetto l'equivalente JavaScript standard:

$(document.getElementById("foo")).get(0); 

Sentitevi liberi di correre in prima persona e vedere quello che si ottiene nel tuo browser, con la performance benchmark che ho fatto. La versione senza jQuery sembra essere molto più veloce.