I selettori di jQuery: first e: eq (0) sono funzionalmente equivalenti?

Question

Non sono sicuro se utilizzare : first oppure : eq (0) in un selettore. Sono abbastanza sicuro che restituiranno sempre lo stesso oggetto, ma uno è più veloce dell'altro?

Sono sicuro che qualcuno qui deve aver già fatto un benchmark di questi selettori e non sono davvero sicuro del modo migliore per testare se uno è più veloce.

Aggiornamento: ecco la panchina che ho corso:

/* start bench */
for (var count = 0; count < 5; count++) {
    var i = 0, limit = 10000;
    var start, end;
    start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)");
    }
    end = new Date();
    alert("div.RadEditor.Telerik:eq(0) : " + (end-start));
    var start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:first");
    }
    end = new Date();
    alert("div.RadEditor.Telerik:first : " + (end-start));
    start = new Date();
    for (i = 0; i < limit; i++) {
        var radeditor = $thisFrame.parents("div.RadEditor.Telerik")[0];
    }
    end = new Date();
    alert("(div.RadEditor.Telerik)[0] : " + (end-start));
    start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $($thisFrame.parents("div.RadEditor.Telerik")[0]);
    }
    end = new Date();
    alert("$((div.RadEditor.Telerik)[0]) : " + (end-start));
}
/* end bench */

Supponevo che il 3 ° sarebbe stato il più veloce e il 4 ° il più lento, ma ecco i risultati che mi sono venuti in mente:

FF3:    :eq(0)  :first  [0] $([0])
trial1  5275    4360    4107    3910
trial2  5175    5231    3916    4134
trial3  5317    5589    4670    4350
trial4  5754    4829    3988    4610
trial5  4771    6019    4669    4803
Average 5258.4  5205.6  4270    4361.4

IE6:    :eq(0)  :first  [0] $([0])
trial1  13796   15733   12202   14014
trial2  14186   13905   12749   11546
trial3  12249   14281   13421   12109
trial4  14984   15015   11718   13421
trial5  16015   13187   11578   10984
Average 14246   14424.2 12333.6 12414.8

Avevo ragione sul restituire il primo oggetto DOM nativo come il più veloce ( [0] ), ma non posso credere che il wrapping di quell'oggetto nella funzione jQuery sia stato più veloce di entrambi : prima e : eq (0) !

A meno che non lo stia facendo male.

Answer 1

2018: Sì, : first e : eq (0) restituiscono lo stesso risultato anche se la differenza di prestazioni sarebbe marginale e forse addirittura banale nel 2018.

2010: bella domanda e ottimo post. L'ho provato qualche tempo fa e non riuscivo a ricordare il risultato esatto. Sono davvero felice di averlo trovato perché è esattamente quello che stavo cercando.

Immagino che il motivo per cui : first e : eq (0) sia un po 'più lento sia molto probabilmente legato all'analisi delle prestazioni. La loro omissione consente al motore jQuery di utilizzare le funzioni native getElementsByTagName e getElementsByClassName .

Nessuna sorpresa i.t.o. l'elemento DOM è il più veloce ad accedere. Il wrapping dell'elemento DOM con jQuery in un ciclo for non avrà necessariamente un effetto negativo sulle prestazioni poiché jQuery utilizza una proprietà expando per scopi di memorizzazione nella cache.

Tuttavia, sarebbe interessante vedere come get (0) si confronta con l'accesso agli elementi DOM e in che modo il loro avvolgimento di jQuery si confronta con eq (0) e il resto dei risultati.

Answer 2

Secondo il codice sorgente di jQuery, f. ) è solo un comodo wrapper per .eq (0) :

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

Answer 3

Sì, sono equivalenti.

No, è probabile che non siano significativamente differenti (qualsiasi altra cosa è la micro-ottimizzazione).