single show vs class show

JavaScript performance comparison

Test case created by Dto

Preparation code

<table>
<tbody id="table_body">
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
<tr>
<td><span>test</span><input class="test2" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test1 test3" style="display:none"></td>
<td><input class="test6 test3" style="display:none"></td>
</tr>
</tbody></table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


 

Preparation code output

test
test
test
test
test
test
test
test
test

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
single find
$('#table_body').find('tr').each(function() {
  var inp = $(this).find('input.class3');
  if (inp.not(':visible')) {
    inp.show();
  }
});
pending…
find by class
$('#table_body').find('tr input.class3').each(function() {
  $(this).show();
});
pending…
find by class #2
$('#table_body').find('tr input.class3').show();
pending…
like #2 but direct path
$('#table_body').find('tr td input.class3').show();
pending…
different find path
$('#table_body tr td.input').find('input.class3').show();
pending…
different find path #2
$('#table_body > tr > td > input.class3').show();
pending…
like 3 but without tr
$('#table_body').find('input.class3').show();
pending…
search for class only
$('#table_body').find('.class3').show();
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