data attributes
JavaScript performance comparison
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];
}
};
}();
};
Benchmark.prototype.teardown = function() {
div.setAttribute('data-po', null);
div.setAttribute('data-ta', null);
div.setAttribute('data-to', null);
div.setAttribute('__data', null);
Data.reset();
$div.data({
"po": null,
"ta": null,
"to": null
});
};
</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… |
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
0 comments