JS Object Memory vs DOM Memory

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="element" data-posts-per-page="10">
</div>

Setup

var objectP = { postsPerPage: 10 };

Test runner

Ready to run.

Testing in
TestOps/sec
Before (jQuery + DOM)
var myFunc = function() {
var ele = $('#element');
var value = ele.data('posts-per-page');
return value;
}
myFunc();
ready
Current (Javascript + DOM)
var myFunc = function() {
var ele = document.getElementById('element');
var value = ele.getAttribute('data-posts-per-page');
return value;
}
myFunc();
ready
After (Javascript + Object)
var myFunc = function() {
var value = objectP.postsPerPage;
return value;
}
myFunc();
ready

Revisions

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