racepickertest

JavaScript performance comparison

Revision 6 of this test case created

Info

You can select children on a DOM in so many ways. This test breaks down selecting children in a list with use of a context, no context, and child selectors.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="container">
  <table id="racePickerRace" class="racePickerRace">
    <tbody>
      <tr class="race">
        <th>
          Løp
        </th>
        <td id="race_1" class="race_1 noPick unplayable ">
          1
        </td>
        <td id="race_2" class="race_2 unplayable ">
          <span class="" id="LinkButtonRace" title="">
            2
          </span>
        </td>
        <td id="race_3"  class="race_3 unplayable ">
          <span class="" id="LinkButtonRace" title="">
            3
          </span>
        </td>
        <td id="race_4"  class="race_4 unplayable ">
          <span class="" id="LinkButtonRace" title="">
            4
          </span>
        </td>
        <td id="race_5" class="race_5 ">
          <a onclick="javascript: StartsGui.selectRace(5);return false;" id="racePicker_RepeaterRaces_ctl05_LinkButtonRace"
          href="javascript:__doPostBack('racePicker$RepeaterRaces$ctl05$LinkButtonRace','')">5</a>
        </td>
        <td id="race_6" class="race_6 unplayable ">
          <span class="" id="LinkButtonRace" title="">
            6
          </span>
        </td>
        <td id="race_7" class="race_7">
          <a onclick="javascript: StartsGui.selectRace(7);return false;" id="racePicker_RepeaterRaces_ctl07_LinkButtonRace"
          href="javascript:__doPostBack('racePicker$RepeaterRaces$ctl07$LinkButtonRace','')">7</a>
        </td>
        <td id="race_8" class="race_8 unplayable ">
          <span class="" id="LinkButtonRace" title="">
            8
          </span>
        </td>
        <td id="race_9" class="race_9">
          <a onclick="javascript: StartsGui.selectRace(9);return false;" id="racePicker_RepeaterRaces_ctl09_LinkButtonRace"
          href="javascript:__doPostBack('racePicker$RepeaterRaces$ctl09$LinkButtonRace','')">9</a>
        </td>
        <td id="race_10" class="race_10 superTriple  active">
          <a onclick="javascript: StartsGui.selectRace(10);return false;" id="racePicker_RepeaterRaces_ctl10_LinkButtonRace"
          onmouseover="tooltip.show('Supertrippel - minimum rekkepris kr 10',0,event)" onmouseout="tooltip.hide()"
          href="javascript:__doPostBack('racePicker$RepeaterRaces$ctl10$LinkButtonRace','')">10</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  Benchmark.prototype.setup = function() {
    //Save The Context
    var parentContext = document.getElementById('parent');
  };
</script>

Preparation code output

Løp 1 2 3 4 5 6 7 8 9 10

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
context then not then filter
 
$('td[class^=race_]').not('[class*=unplayable]').filter(':first').text().trim();
 pending…
pure selector
 
$('td[class^=race_]:not[class*=unplayable]:first').text().trim();
 pending…
find
 
$('table').find('td[id^=race_]').not('[class*=unplayable]').filter(':first').text().trim();
 pending…
by context
 
var context = document.getElementById('racePickerRace');
$(context).find('td[id^=race_]').not('[class*=unplayable]').filter(':first').text().trim();
 pending…
by id using css
 
$('#racePickerTable td[class^=race_]').not('[class*=unplayable]').filter(':first').text().trim();
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment