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

Revision 2 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.7.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>
<div id="mytarget" style="background-color:red;">X</div>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$("#mytarget").css('background-color', 'blue').css('background-color', 'red');
ready
Google Closure
var node = goog.dom.getElement('mytarget');
node.style.backgroundColor = 'blue';
node.style.backgroundColor = 'red';
 
ready
pure javascript
var node = document.getElementById('mytarget');
node.style.backgroundColor = 'blue';
node.style.backgroundColor = 'red';
ready

Revisions

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