HTML5 data attribute - dataset vs getAttribute (v4)

Revision 4 of this benchmark created 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
for (var i = eles.length-1; i--; ) {
  eles[i].setAttribute('data-stuff', eles[i].id);
}
 
ready
set dataset
for (var i = eles.length-1; i--; ) {
  eles[i].dataset.stuff = eles[i].id;
}
 
ready
getAttribute
for (var i = eles.length-1; i--; ) {
  var say = eles[i].getAttribute('data-say');
}
 
ready
get dataset
for (var i = eles.length-1; i--; ) {
  var say = eles[i].dataset.say;
}
ready

Revisions

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