jQuery data- * vs selettore di classe - prestazioni?

Question

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

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

Answer 1

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.