Google Closure vs jQuery: DOM selector and css style modification

JavaScript performance comparison

Revision 3 of this test case created by Ric Szopa

Preparation code

<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>
<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>

    

Preparation code output

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

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery
jq_target.css('background-color', 'blue').css('background-color', 'red');
pending…
Google Closure

node.style.backgroundColor = 'blue';
node.style.backgroundColor = 'red';
pending…
Pure JavaScript
pure_node.style.backgroundColor = 'blue';
pure_node.style.backgroundColor = 'red';
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.

0 Comments

X