jQuery class selector performance

Benchmark created on

Description

Compares the performance of various ways to retrieve elements via jQuery

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="wrapper">
<div class="product">
Product 1
</div>
<div class="product">
Product 2
</div>
<div class="product">
Product 3
</div>
<div class="product">
Product 4
</div>
</div>

<div id="myWrapper" class="wrapper">
<div class="product">
Product 5
</div>
<div class="product">
Product 6
</div>
<div class="product">
Product 7
</div>
<div class="product">
Product 8
</div>
</div>

<div class="wrapper">
<div class="product">
Product 9
</div>
<div class="product">
Product 10
</div>
<div class="product">
Product 11
</div>
<div class="product">
Product 12
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
1a: class selector
var j1a = $('.product');
ready
1b: element class selector
var j1b = $('div.product');
ready
2a: id class selector
var j2a = $('#myWrapper .product');
ready
2b: id element class selector
var j2b = $('#myWrapper div.product');
ready
3a: getElementById
var e3a = document.getElementById("myWrapper");
var j3a = $(e3a);
ready
3b: jQuery get by ID
var j3b = $('#myWrapper');
ready
4a: jQuery filter
var j4a = $('div').filter('.product');
ready
4b: jQuery find
var j4b = $('div').find('.product');
ready

Revisions

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