jQuery selector vs find vs cached selector find

JavaScript performance comparison

Test case created by Alun Davey

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="id-1">
    <h2>H2</h2>
    <a href="#">A</a>
</div>
<div class="class-1">
    <h2>H2</h2>
    <a href="#">A</a>
</div>

Preparation code output

H2

A

H2

A

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
$('#id-1 a, #id-1 h2')
$('#id-1 a, #id-1 h2')
pending…
$('#id-1').find('a, h2')
$('#id-1').find('a, h2')
pending…
var id1 = $('#id-1'); id1.find('a, h2')
var id1 = $('#id-1'); id1.find('a, h2')
pending…
$('.class-1 a, .class-1 h2')
$('.class-1 a, .class-1 h2')
pending…
$('.class-1').find('a, h2')
$('.class-1').find('a, h2')
pending…
var class1 = $('.class-1'); class1.find('a, h2')
var class1 = $('.class-1'); class1.find('a, h2')
pending…

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

Compare results of other browsers

0 comments

Add a comment