HTML data and jQuery data()

JavaScript performance comparison

Test case created by Michael Alt

Preparation code

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>

<div id="strValue"></div>
<div id="intValue"></div>
<div id="objValue"></div>
<div id="lstValue"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var strValue = "Hello World";
  var intValue = 17;
  
  var objValue = {
    "question": "?",
    "answer": 42
  }
  
  var lstValue = [1, 1, 2, 3, 5, 8, 13];
  
  var str = document.getElementById("strValue");
  var int = document.getElementById("intValue");
  var obj = document.getElementById("objValue");
  var lst = document.getElementById("lstValue");
  
  var strNode = $(str);
  var objNode = $(obj);
  var intNode = $(int);
  var lstNode = $(lst);

};
</script>

Preparation code output

<div id="strValue"></div> <div id="intValue"></div> <div id="objValue"></div> <div id="lstValue"></div>

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
HTML data- Attributes
// store
str.setAttribute('data-str', strValue);
int.setAttribute('data-int', intValue);
obj.setAttribute('data-obj', JSON.stringify(objValue));
lst.setAttribute('data-lst', JSON.stringify(lstValue));

// read and update

str.setAttribute('data-str', str.getAttribute('data-str') + strValue);

var i = int.getAttribute('data-int') * 1;
int.setAttribute('data-int', i + 4);

var srcLst = JSON.parse(lst.getAttribute('data-lst'));
srcLst.push(21);
lst.setAttribute('data-lst', JSON.stringify(srcLst));

var read = JSON.parse(obj.getAttribute('data-obj'));
read.answer = 43;
obj.setAttribute('data-obj', JSON.stringify(read));
pending…
jQuery data()
// store
strNode.data('jqstr', strValue);
objNode.data('jqobj', objValue);
intNode.data('jqint', intValue);
lstNode.data('jqlst', lstValue);

// read and update
strNode.data('jqstr', strNode.data('jqstr') + strValue);
objNode.data('jqobj').answer = 43;
intNode.data('jqint', intNode.data('jqint') + 4);
lstNode.data('jqlst').push(21);
pending…

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

Compare results of other browsers

0 Comments