jQuery .data() performance vs .attr() performance (v97)

Revision 97 of this benchmark created on

Preparation HTML

<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<![endif]-->

<div id="theInput1"></div>
<div id="theInput2"></div>
<div id="theInput3"></div>
<div id="theInput4"></div>
<div id="theInput5"></div>
<div id="theInput6"></div>
<script>
var theInput1 = $('#theInput1');
var theInput2 = $('#theInput2');
var theInput3 = $('#theInput3');
var theInput4 = $('#theInput4');
var theInput5 = $('#theInput5');
var theInput6 = $('#theInput5');
theInput1.attr('someAttr', 'theValue')
theInput2.data('someData', 'theValue');
theInput3.attr('data-someData', 'theValue');
theInput4.attr('data-someData', 'theValue');
$.data(theInput5, 'someData', 'theValue');
theInput6.attr('data-someData', 'theValue');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Attribute get
theInput1.attr('someAttr');
ready
Attribute set
theInput1.attr('someAttr', 'newValue');
ready
Data get
theInput2.data('someData');
ready
Data set
theInput2.data('someData', 'newValue');
ready
Attribute Data Get
theInput3.attr('data-someData');
ready
Attribute Data Set
theInput3.attr('data-someData', 'theValue');
ready
Attribute Data Get Data
theInput4.data('someData');
ready
Attribute Data Set Data
theInput4.data('someData', 'theValue');
ready
Direct data get
$.data(theInput5, 'someData');
ready
Direct data set
$.data(theInput5, 'someData', 'newValue');
ready
Attribute Direct data get
$.data(theInput6, 'someData');
ready
Attribute Direct data set
$.data(theInput6, 'someData', 'newValue');
ready

Revisions

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