jQuery vs Dojo vs Mootools vs YUI - DOM Test

JavaScript performance comparison

Revision 130 of this test case created by Mariusz

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>
<div class="content">
<p>Content xyz</p>
</div>

<script type="text/javascript">
var Y = {},
    Q = {};

YUI().use('node', 'selector-css3', function (Y) {
    this.Y = Y;
});

require(['dojo/query!css3'], function(q) {
    this.Q = q;
});

</script>

Preparation code output

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Content xyz

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Dojo
 
var d1 = Q(".content");

 
 pending…
jQuery
 
var j1 = jQuery('.content');
 pending…
Mootools
 
var m1 = $$('.content');
 pending…
YUI
 
var y2 = Y.all('.content');
 pending…
jQuery - inside
 
var j2 = jQuery('.content p');
 pending…
Mootools - inside
 
var m2 = $$('.content p');
 pending…
Dojo - inside
 
var d1 = Q(".content p");


 
 pending…
YUI - inside
 
var y2 = Y.all('.content p')
 
 pending…
Native (gEBCN)
 
var gEBCN = document.getElementsByClassName("content");
 pending…
Native (QSA)
 
var qsa1 = document.querySelectorAll(".content");
 pending…
Native (QSA) - inside
 
var qsa2 = document.querySelectorAll(".content p");
 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:

0 comments

Add a comment