jQuery vs. Prototype (v21)

Revision 21 of this benchmark created on

Description

This is a comparison of selector engine speed between jQuery 2.0.3 and Prototype 1.6.1

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.6.1/prototype.js">
</script>
<script src="//code.jquery.com/jquery-2.0.3.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
Prototype
$$("#list .sublist li").each(function(item) {
    Event.observe( $(item)
        .addClassName( 'cssclass' )
        .removeClassName( 'cssclass' )
    , 'click', function() {})
});
ready
jquery
jQuery("#list .sublist li").addClass( 'cssclass' ).removeClass( 'cssclass' ).click(function() {});
ready

Revisions

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