data attributes

JavaScript performance comparison

Revision 9 of this test case created by Philip van Heijningen

Info

What if we only do reading of data-attributes. Since most are commming generated from databases..

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="mydiv"></div>
<script>
Benchmark.prototype.setup = function() {
    var div = document.getElementById('mydiv');
    var $div = $(div);
    var Data = function() {
      var warehouse = {};
      var count = 1;
      return {
        reset: function() {
          count = 1;
          warehouse = {};
        },
        set: function (dom, data) {
          if (!dom.__data) {
            dom.__data = "hello" + count++;
          }
          warehouse[dom.__data] = data;
        },
        get: function(dom) {
          return warehouse[dom.__data];
        }
      };
   
       
    }();
   
    Data.set(div, {po: 'bla bla ', ta: '123456789', to: 'The red chick jumps over the white chicke'});
    div.setAttribute('data-po', 'bla bla');
    div.setAttribute('data-ta', '123456789');
    div.setAttribute('data-to', 'The red chick jumps over the white chicken');
   
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
old school setAttribute
var a = div.getAttribute('data-po'),
 b = div.getAttribute('data-ta'),
 c = div.getAttribute('data-to');
pending…
DIY Data
var data = Data.get(div),
 a = data.po,
 b = data.ta,
 c = data.to;
pending…
HTML5 dataset
var data = div.dataset,
a = data.po,
b = data.ta,
c = data.to;
pending…
jQuery .data()
var data = $div.data(),
a = data.po,
b = data.ta,
c = data.to;
pending…
old school []
mydiv = $div.get();
var a = mydiv ['data-po'];
var b = mydiv ['data-ta'];
var c = mydiv ['data-to'];
pending…
jQuery $.data()
var data = $.data(div),
a = data.po,
b = data.ta,
c = data.to;
pending…
jQuery .attr()
var a = $div.attr('data-po'),
b = $div.attr('data-ta'),
c = $div.attr('data-to');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

tomByrer commented :

"PaleMoon" browser is an optimized FireFox. In my case x64 if that matters.

Add a comment