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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



    

Preparation code output

<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>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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

test
test
test
test
test
test
test
test
test