jQuery .children() vs CSS '>' vs table .rows & .cells (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var $table = $('#test');
  var nb = 100; // rows count
  // Setup
  var contentStr = '<tr><td>1</td><td>2</td></tr>';
  var content = '';
  for (var i = 0; i < nb; i++) {
   content += contentStr;
  }
  $table.children('tbody').html(content);
  
  var $tbody = $table.children('tbody');
  var table = $table.get(0);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
CSS selector > (direct child)
for (var j = 0; j < nb; j++) {
 $tbody.find('tr:nth-child(' + j + ') > td:nth-child(1)').get(0)
}
ready
.children()
for (var j = 0; j < nb; j++) {
 $tbody.children('tr:nth-child(' + j + ')').children('td:nth-child(1)').get(0);
}
ready
table .rows & .cells
for (var j = 0; j < nb; j++) {
 $table.rows[j].cells[0];
}
ready

Revisions

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