jquery find vs direct (v2)

Revision 2 of this benchmark created by hmert on

Description

Test if ".find" on some selected node is faster.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="test_root">
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
<p class="sel"></p>
<p id="sel2" class="sel"></p>
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
abcd</li>
<li>abcd</li>
</ul>
</div>
<div id="disturbing_elem">
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
<p class="sel"></p>
<p id="sel2_b" class="sel"></p>
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
abcd</li>
<li>abcd</li>
</ul>
</div>

Setup

var node_root = $('#test_root');

Test runner

Ready to run.

Testing in
TestOps/sec
find
$('#test_root').find('p')
ready
direct select
$('#test_root p')
ready
find by class
$('#test_root').find('.sel')
ready
direct select by class
$('#test_root .sel')
ready
select with context
$('p', '#test_root')
ready
select with jquery context
$('p', node_root)
ready
select with element context
$('p', node_root[0])
ready
find with selected node
node_root.find('p')
ready

Revisions

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

  • Revision 1: published by ktmud on
  • Revision 2: published by hmert on