Data attribute vs.jQuery().data

JavaScript performance comparison

Revision 91 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="el"></div>
<script>
  var i = 0,
      $del = document.getElementById('el'),
      $el = $(el);
      $eld = $el[0];
</script>
      
<script>
Benchmark.prototype.setup = function() {
  $i=0;
  $el.empty();

};
</script>

Preparation code output

<div id="el"></div> <script> var i = 0, $del = document.getElementById('el'), $el = $(el); $eld = $el[0]; </script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Data attribute
$i=$i+1;
$el.attr('data-key-' + i, 'val-' + i);
$el.attr("data-key-" + i);
pending…
jQuery.fn.data
$i = $i + 1;
$el.data('key-' + i, 'val-' + i);
$el.data("key-" + i);
pending…
get/set Attribute
$i = $i + 1;
$del.setAttribute('data-key-'+i, 'val-' + i)
$del.getAttribute('data-key-'+i)
pending…
jquery get
$i = $i + 1;
$eld.setAttribute('data-key-'+i, 'val-' + i)
$eld.getAttribute('data-key-'+i)
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.

0 Comments