dataset vs .data - Difference?

Question

I am reading some values in data attribute fields. I have seen two easy ways to read the data as shown below:

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

OR

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

My question is which of these has better performance or do they really differ?

I have a page with many data attributes that I am accessing and I would like to use the method that has the best performance.

Any guidance on understanding the difference between the two would be appreciated. While I am looking at performance specifically if there are other reasons to use one over the other I would like to know this as well.

Gawk

I'd say pure JS is faster or equal to jQuery – Appulse

Since .dataset is pure Javascript I suppose it should be faster than using .data() (after all, at least you're missing one function call), although the difference is probably a few milliseconds. The only thing you always have to consider is that not every browser knows .dataset. Refer here for the browser compatibility: developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… – Sheliasheline

Answer 1

dataset is a native property of an element that contains the data attributes, it's a new(ish) addition and as such is only supported in IE11+, Chrome 8+, FF 6+ etc.

A more cross browser solution would be to get the attribute directly

webappData.getAttribute('data-rating');

---

data() is a jQuery method, and other than using the HTML5 data attribute to set the inital value if none exists internally, it has nothing in common with dataset.

data() stores whatever data you pass it in an internal object created by jQuery, so this for instance would fail

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

element.dataset.key // undefined

as the data is not stored in the attributes at all, but internally by jQuery.
The jQuery equivalent of getting and setting the data attribute would be attr()

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

---

The native methods are probably faster, but as they are not really comparable to jQuery's data() it doesn't really matter, but for getting the data attribute I would think the fastest method with the best browser support would be

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

Huffish

Thank you for the information. Other than browser compatibility are there reasons to use .getAttribute over .dataset? – Gawk

Indeed there are: My experience is that .dataset does not work in all browser (especially older IEs don't work) – Sheliasheline

btw: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification. – Sheliasheline

If you want to edit it into your answer, here's a JSPerf test showing getAttribute to be considerably faster than dataset: jsperf.com/dataset-vs-getattribute-and-setattribute/13 – Lois

Values of dataset items are always strings, while jQuery's data() preserves types set by .data(key, value). (dataset returns DOMStringMap; jQuery's data() returns jQuery object.) – Linoleum