data attributes readonly

Benchmark created by Hurst on


Description

Like stoyan's data-attribute speed test, but only checking getters (since that's the far more common operation in my experience).

Preparation HTML

<div id="mydiv"></div>

Setup

var div = document.getElementById('mydiv');
    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];
        }
      };
    }();
    
    div.setAttribute('data-po', 'to');
    div.setAttribute('data-ta', 'ma');
    div.setAttribute('data-to', 'to');

    Data.set(div, {po: 'to', ta: 'ma', to: 'to'});

Teardown


    div.setAttribute('data-po', null);
    div.setAttribute('data-ta', null);
    div.setAttribute('data-to', null);
    div.setAttribute('__data', null);
    Data.reset();
  

Test runner

Ready to run.

Testing in
TestOps/sec
old school setAttribute
var a = div.getAttribute('data-po');
var b = div.getAttribute('data-ta');
var c = div.getAttribute('data-to');
ready
DIY Data
var data = Data.get(div);
var a = data.po;
var b = data.ta;
var c = data.to;
ready
HTML5 dataset
var data = div.dataset;
var a = data.po;
var b = data.ta;
var c = data.to;
ready

Revisions

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

  • Revision 1: published by Hurst on