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

Revision 98 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>
<div id="theInput7"></div>
<script>
var theInput1 = $('#theInput1');
var theInput2 = $('#theInput2');
var theInput3 = $('#theInput3');
var theInput4 = $('#theInput4');
var theInput5 = $('#theInput5');
var theInput6 = $('#theInput6');
var theInput7 = $(document.body);
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');
document.body.someProp = 'theValue';
document.body.dataset.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
Property get
theInput7.prop('someProp');
ready
Property set
theInput7.prop('someProp', 'newValue');
ready
body Property get
document.body.someProp;
ready
body Property set
document.body.someProp = 'newValue';
ready
body dataset get
document.body.dataset.someData;
ready
body dataset set
document.body.dataset.someData = 'newValue';
ready

Revisions

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