jQuery class vs eq

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<table>
  <tr id="row1">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row2">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row3">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row4">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row5">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row6">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row7">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row8">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row9">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
  <tr id="row10">
    <td class="col1">
      Col1
    </td>
    <td class="col2">
      Col2
    </td>
    <td class="col3">
      Col3
    </td>
    <td class="col4">
      Col4
    </td>
    <td class="col5">
      Col5
    </td>
    <td class="col6">
      Col6
    </td>
    <td class="col7">
      Col7
    </td>
    <td class="col8">
      Col8
    </td>
    <td class="col9">
      Col9
    </td>
    <td class="col10">
      Col10
    </td>
    <td class="col11">
      Col11
    </td>
    <td class="col12">
      Col12
    </td>
    <td class="col13">
      Col13
    </td>
    <td class="col14">
      Col14
    </td>
    <td class="col15">
      Col15
    </td>
    <td class="col16">
      Col16
    </td>
    <td class="col17">
      Col17
    </td>
    <td class="col18">
      Col18
    </td>
    <td class="col19">
      Col19
    </td>
  </tr>
</table>

Preparation code output

Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19
Col1 Col2 Col3 Col4 Col5 Col6 Col7 Col8 Col9 Col10 Col11 Col12 Col13 Col14 Col15 Col16 Col17 Col18 Col19

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Class
 
$('#row1 .col4');
$('#row3 .col3');
$('#row5 .col7');
$('#row10 .col5');
 pending…
Eq
 
$('#row1 td:eq(3)');
$('#row3 td:eq(2)');
$('#row5 td:eq(6)');
$('#row10 td:eq(4)');
 pending…
Eq(array)
 
$($('#row1 td')[3]);
$($('#row3 td')[2]);
$($('#row5 td')[6]);
$($('#row10 td')[4]);
 pending…
Eq(fun)
 
$('#row1 td').eq(3);
$('#row3 td').eq(2);
$('#row5 td').eq(6);
$('#row10 td').eq(4);
 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