jQuery - setting attr vs data

JavaScript performance comparison

Test case created by T.J. Crowder on 20th March 2012

Info

Compare the speed of storing custom data via data or attr using jQuery 1.7.1.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="target"></div>
<script>
  Benchmark.prototype.setup = function() {
    var theDiv = $("#target");
  };
</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
attr	`theDiv.attr("data-foo", String(Math.floor(Math.random() * 100)));`	pending…
data	`theDiv.data("bar", String(Math.floor(Math.random() * 100)));`	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:

Revision 1: published by T.J. Crowder on 20th March 2012
Revision 2: published on 29th May 2012
Revision 3: published on 14th August 2012
Revision 4: published on 15th August 2012
Revision 5: published on 23rd August 2012