jQuery data- * vs selettore di classe - prestazioni?

ho visto molti esempi (tra cui bootstrap preferito di Twitter), dove varie API fanno uso di $("[data-something]") piuttosto che selezionare per classe $(".something")jQuery data- * vs selettore di classe - prestazioni?

Nethertheless ho cercato di trovare informazioni sulle prestazioni tra queste due selettori differenti. Sono stato sorpreso che molti test delle prestazioni hanno scoperto che quei selettori sono ugualmente veloci sulla maggior parte dei browser moderni, quindi ho deciso di fare my own test

Sono davvero confuso in questo momento e non so se è il mio test che sono fatti male (in qualche modo?) o sono altri test che ho ispezionato prima?

Qualcuno potrebbe fornire ulteriori informazioni se sto facendo qualcosa di sbagliato durante il test o sono questi test di corretto e dati-attributo selettore è infatti praticamente più lento di regolare classe selettore?

Grazie

fonte

2013-01-21 Vytautas Butkus

Penso sia dovuto al fatto che 'data-attribute' utilizza' querySelectorAll' o sfreccia se necessario, mentre una classe regolare utilizza il 'getElementsByClassName' più veloce. Controlla http://jsperf.com/class-vs-data-1 – elclanrs

Beh, ho capito bene, ma mentre leggevo prima ero sorpreso di scoprire che alcuni test mostrano prestazioni uguali per entrambi i selettori, ecco perché ho fatto il mio test e ora Voglio che alcune conferme siano quelle corrette. O forse qualcuno può indicarmi cosa ho sbagliato :) –

Direi di sì, quei risultati mi sembrano corretti. È banale, però, a meno che tu non abbia mille elementi ... – elclanrs

Quando si utilizza selettori di attributo, le prestazioni possono variare a seconda del supporto querySelector nel tuo browser. jQuery tornerà a una libreria integrata (chiamata SizzleJS) che è molto più lenta.

La selezione sui nomi di classe sarà più veloce perché utilizzerà sempre getElementsByClassName, che è comunemente supportato su tutti i browser comuni.

Per come lo vedo, le classi hanno uno scopo diverso dagli attributi dei dati. Le classi "categorizzeranno" gli elementi in modo che possano essere disegnati correttamente e creare una struttura.

Gli attributi dei dati sono esattamente questo: dati. A volte è necessario memorizzare ulteriori dati nei tuoi elementi. Ad esempio:

<table> 
    <tr data-id="4" data-category="1"> 
     <td>Name</td> 
     <td>Email</td> 
    </tr> 
</table>

Si noti che non sto utilizzando l'attributo "id" regolare per lo stesso motivo.

fonte

2013-07-23 21:47:38 Webberig

jQuery data- * vs selettore di classe - prestazioni?

risposta

Problemi correlati