Dynatable Refactor (v3)

Revision 3 of this benchmark created by Steve Schwartz on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/s3.alfajango.com/jsperf/dynatable-refactor/jquery.dynatable-0.0.3.js"></script>
<script src="https://s3.amazonaws.com/s3.alfajango.com/jsperf/dynatable-refactor/jquery.dynatable-0.1.0.js"></script>
<script src="https://s3.amazonaws.com/s3.alfajango.com/jsperf/dynatable-refactor/jquery.dynatable.js"></script>
<script src="https://s3.amazonaws.com/s3.alfajango.com/jsperf/dynatable-refactor/jquery.dynatable-0.2.0.js"></script>

<div id="container"></div>

Setup

var numTables = 20,
        numColumns = 5,
        numRows = 50,
        tables = [];
    function randomString(length) {
      var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
          result = '';
      for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
      return result;
    }
    
    for (var t = 0; t < numTables; t++) {
      var thisNumRows = numRows,
          thisNumColumns = numColumns,
          rows = [], columns = [],
          className = 'test-table';
    
      className += t % 2 ? ' even' : ' odd';
      if (t === 0) {
        className += ' large-row-set';
        thisNumRows = 2000;
      } else if (t === 1) {
        className += ' large-col-set';
        thisNumColumns = 100;
      } else {
        className += ' normal-set';
      }
    
      for (var i = 0; i < thisNumColumns; i++) {
        columns.push('<th>Column ' + i + '</th>');
      }
    
      for (var i = 0; i < thisNumRows; i++) {
        var data = [];
        for (var n = 0; n < numColumns; n++) {
          data.push(randomString(16));
        }
        rows.push('<tr><td>' + data.join('</td><td>') + '</td></tr>');
      }
    
      tables.push('<table id="test-table-' + t + '" class="' + className + '"><thead><tr>' + columns.join() + '</tr><tbody>' + rows.join() + '</tbody></table>');
    }
    $('#container').html(tables.join());
    
    var normalSet = $('.normal-set'),
        largeRowSet = $('.large-row-set'),
        largeColSet = $('.large-col-set'),
        emptySet = $('.does-not-exist'),
        enterKey = $.Event( "keypress", { which: 13 } );

Teardown


    $('.test-table').remove();
    $('#container').html('');

Test runner

Ready to run.

Testing in
TestOps/sec
Init Lots of Tables - Old
normalSet.dynatable003({features: {pushState: false}});
ready
Init Lots of Tables - Refactored
normalSet.dynatable010({features: {pushState: false}});
ready
Init Lots of Tables - Refactored for loop
normalSet.dynatable({features: {pushState: false}});
ready
Init Lots of Tables - Refactored string concat rows
normalSet.dynatable020({features: {pushState: false}});
ready
Init Lots of Rows - Old
largeRowSet.dynatable003({features: {pushState: false}});
ready
Init Lots of Rows - Refactored
largeRowSet.dynatable010({features: {pushState: false}});
ready
Init Lots of Rows - Refactored for loop
largeRowSet.dynatable({features: {pushState: false}});
ready
Init Lots of Rows - Refactored string concat rows
largeRowSet.dynatable020({features: {pushState: false}});
ready
Init Lots of Columns - Old
largeColSet.dynatable003({features: {pushState: false}});
ready
Init Lots of Columns - Refactored
largeColSet.dynatable010({features: {pushState: false}});
ready
Init Lots of Columns - Refactored for loop
largeColSet.dynatable({features: {pushState: false}});
ready
Init Lots of Columns - Refactored string concat rows
largeColSet.dynatable020({features: {pushState: false}});
ready
Sort - Old
largeRowSet.dynatable003({features: {pushState: false}});
largeRowSet.find('th a').first().click();
ready
Sort - Refactored
largeRowSet.dynatable010({features: {pushState: false}});
largeRowSet.find('th a').first().click();
ready
Sort - Refactored for loop
largeRowSet.dynatable({features: {pushState: false}});
largeRowSet.find('th a').first().click();
ready
Sort - Refactored string concat rows
largeRowSet.dynatable020({features: {pushState: false}});
largeRowSet.find('th a').first().click();
ready
Search - Old
largeColSet.dynatable003({features: {pushState: false}});
$('#dynatable-query-search-test-table-1').val("asdf").trigger(enterKey);
ready
Search - Refactored
largeColSet.dynatable010({features: {pushState: false}});
$('#dynatable-query-search-test-table-1').val("asdf").trigger(enterKey);
ready
Search - Refactored for loop
largeColSet.dynatable({features: {pushState: false}});
$('#dynatable-query-search-test-table-1').val("asdf").trigger(enterKey);
ready
Search - Refactored string concat rows
largeColSet.dynatable020({features: {pushState: false}});
$('#dynatable-query-search-test-table-1').val("asdf").trigger(enterKey);
ready

Revisions

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

  • Revision 1: published by Steve Schwartz on
  • Revision 2: published by Steve Schwartz on
  • Revision 3: published by Steve Schwartz on