Google Closure vs jQuery: DOM selector and css style modification (v6)

Revision 6 of this benchmark created on

Description

I was curious how much overhead jQuery produces over Google Closure's DOM API and direct Javascript use, and I've put a small micro-benchmark test.

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>goog.require('goog.dom');</script>
<script>
var jq_target = $("#mytarget");
var node = goog.dom.getElement('mytarget');
var pure_node = document.getElementById('mytarget');

</script>
<div id="mytarget" style="background-color:red;">X</div>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
jq_target.css('background-color', 'blue').css('background-color', 'red');
ready
Google Closure
node.style.backgroundColor = 'blue';
node.style.backgroundColor = 'red';
 
ready
Pure JavaScript
pure_node.style.backgroundColor = 'blue';
pure_node.style.backgroundColor = 'red';
 
ready

Revisions

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