jQuery .data() .attr() .prop() performance (v77)

Revision 77 of this benchmark created on

Description

test pretty much every practical method of storing & retrieving data

Preparation HTML

<script src="//code.jquery.com/jquery-git2.min.js"></script>

<input type="text" id="theInput" value="foo"></input>

Setup

var theInput = $('#theInput');
    theInput.attr('someAttr', 'theValue').prop('someProp', 'theValue').data('someData', 'theValue');
    localStorage.setItem('someData', 'theValue');
    window.Settings= {
     'someData': 'theValue'
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Attribute get
theInput.attr('someAttr');
ready
Attribute set
theInput.attr('someAttr', 'newValue');
ready
Data get
theInput.data('someData');
ready
Data set
theInput.data('someData', 'newValue');
ready
prop get
theInput.prop('someProp');
ready
prop set
theInput.prop('someProp', 'newValue');
ready
Direct data get 2
$.data($('#theInput')[0], 'someData');
ready
Direct data set 2
$.data($('#theInput')[0], 'someData', 'newValue');
ready
Direct doc.body get
$.data(document.body, 'someData');
ready
Direct doc.body set
$.data(document.body, 'someData', 'newValue');
ready
dataset get
$('#theInput')[0].dataset.someData;
ready
dataset set
$('#theInput')[0].dataset.someData = 'newValue';
ready
property get
$('#theInput')[0].someProp;
ready
property set
$('#theInput')[0].someProp = 'newValue';
ready
localstorage set
localStorage.setItem('someData', 'newValue');
ready
localstorage get
localStorage.getItem('someData');
ready
namespaced var set
window.Settings.someData = 'theValue';
ready
namespaced var get
window.Settings.someData;
ready
plain global set
Settings.someData = 'theValue';
ready
plain global set
Settings.someData;
ready

Revisions

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