jQuery vs. Prototype vs. querySelectorAll (v5)

Revision 5 of this benchmark created by Mathew on

Description

This is a comparison of selector engine speed between jQuery, Prototype and Vanilla Javascript (well, the Selector API).

Both Prototype and jQuery actually check for querySelectorAll and use it if it is available. However, this is at a performance loss.

Preparation HTML

<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$.noConflict();
</script>


</head>
<body>
<ul id="list">
<li>
<ul class="sublist">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</li>
<li>
<ul class="sublist">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</li><li>
<ul class="sublist">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</li><li>
<ul class="sublist">
<li>
item1
</li>
<li>
item2
</li>
</ul>
</li>
</ul>
</body>
</html>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery
var $obj = jQuery("#list .sublist li");
ready
Prototype
var MacGuffin = $$("#list .sublist li");
ready
Javascript
var nodes = document.querySelectorAll("#list .sublist li");
 
ready

Revisions

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