dataset vs .data - Differenza?

Question

Sto leggendo alcuni valori nei campi degli attributi dei dati. Ho visto due semplici modi per leggere i dati come illustrato di seguito:

var webappData = document.getElementById('web-app-data'), 
    rating = webappData.dataset.rating; 

O

var effectData = $('.effects-list li'), 
    creative = effectData.filter('[data-creative]').data("creative"); 

La mia domanda è: quale di questi ha una migliore performance o fanno veramente differiscono?

Ho una pagina con molti attributi di dati a cui sto accedendo e vorrei utilizzare il metodo che ha le migliori prestazioni.

Sarebbe gradita qualsiasi indicazione sulla comprensione della differenza tra i due. Mentre guardo le prestazioni in modo specifico se ci sono altri motivi per usare l'una sull'altra mi piacerebbe sapere anche questo.

Answer 1

dataset è una struttura nativa di un elemento che contiene gli attributi dei dati, è un nuovo (ish) Inoltre, e come tale è supportato solo in IE11 +, Cromo 8+, FF 6+ ecc

A più trasversale soluzione browser dovrebbe essere per ottenere l'attributo direttamente

webappData.getAttribute('data-rating'); 

---

data() è un metodo jQuery, e tranne usando l'attributo di dati HTML5 per impostare il valore iniziale che se non esiste internamente, non ha nulla in comune con set di dati .

data() memorizza qualsiasi dato si passa in un oggetto interno creato da jQuery, quindi questo per esempio fallirebbe

$(element).data('key', 'value'); 

element.dataset.key // undefined 

come i dati non vengono memorizzati in attributi a tutti, ma internamente da jQuery.
L'equivalente jQuery di ottenere e impostare l'attributo di dati sarebbe attr()

$(element).attr('data-key', 'value'); 

---

I metodi nativi sono probabilmente più veloce, ma come in realtà non sono paragonabili a jQuery di data() esso non importa, ma per ottenere l'attributo di dati penserei il metodo più veloce con il miglior supporto del browser sarebbe

var rating = webappData.getAttribute('data-rating');