data attributes
JavaScript performance comparison
Info
What if we only do reading of data-attributes. Since most are commming generated from databases..
Preparation code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="mydiv"></div>
<script>
Benchmark.prototype.setup = function() {
var div = document.getElementById('mydiv');
var $div = $(div);
var Data = function() {
var warehouse = {};
var count = 1;
return {
reset: function() {
count = 1;
warehouse = {};
},
set: function (dom, data) {
if (!dom.__data) {
dom.__data = "hello" + count++;
}
warehouse[dom.__data] = data;
},
get: function(dom) {
return warehouse[dom.__data];
}
};
}();
Data.set(div, {po: 'bla bla ', ta: '123456789', to: 'The red chick jumps over the white chicke'});
div.setAttribute('data-po', 'bla bla');
div.setAttribute('data-ta', '123456789');
div.setAttribute('data-to', 'The red chick jumps over the white chicken');
};
</script>
Preparation code output
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
old school setAttribute |
|
pending… |
DIY Data |
|
pending… |
HTML5 dataset |
|
pending… |
jQuery .data() |
|
pending… |
old school [] |
|
pending… |
jQuery $.data() |
|
pending… |
jQuery .attr() |
|
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 Stoyan
- Revision 3: published
- Revision 4: published by JoeMorgan
- Revision 7: published by ygally
- Revision 8: published
- Revision 9: published by Philip van Heijningen
1 comment
"PaleMoon" browser is an optimized FireFox. In my case x64 if that matters.