HTML5 data attribute - dataset vs getAttribute (v2)

Revision 2 of this benchmark created by jden on

Preparation HTML

<div id="A" data-say="ay"></div>
<div id="B" data-say="bee"></div>
<div id="C" data-say="see"></div>
<div id="D" data-say="dee"></div>
<div id="E" data-say="ee"></div>
<div id="F" data-say="eff"></div>

Setup

var eles = ['A','B','C','D','E','F'].map(function (l) { return document.getElementById(l); });

Test runner

Ready to run.

Testing in
TestOps/sec
setAttribute
eles.forEach(function (ele) {
    ele.setAttribute('data-stuff', ele.id);
});
ready
set dataset
eles.forEach(function (ele) {
    ele.dataset.stuff = ele.id;
});
ready
getAttribute
eles.forEach(function (ele) {
    var say = ele.getAttribute('data-say');
});
ready
get dataset
eles.forEach(function (ele) {
    var say = ele.dataset.say;
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.