Table sorting stack overflow

JavaScript performance comparison

Test case created by

Preparation code

<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;">Name</th>
<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc1 = 1;">Surname</th>
<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; asc2 = 1;">Age</th>
</tr>
</thead>
<tbody id="people">
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
<tr><td>Raja</td><td>Dey</td><td>18</td></tr>
<tr><td>Mamata</td><td>Sharma</td><td>20</td></tr>
<tr><td>Avijit</td><td>Sharma</td><td>21</td></tr>
<tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr>
<tr><td>Nabin</td><td>Roy</td><td>27</td></tr>
</tbody>
</table>
</body>

      
<script>
Benchmark.prototype.setup = function() {
  var tbody, asc1 = 1, asc2 = 1, asc3 = 1;
  tbody = document.getElementById("people");
  
  

};
</script>

Preparation code output

<table> <thead> <tr> <th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;">Name</th> <th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc1 = 1;">Surname</th> <th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; asc2 = 1;">Age</th> </tr> </thead> <tbody id="people"> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> <tr><td>Raja</td><td>Dey</td><td>18</td></tr> <tr><td>Mamata</td><td>Sharma</td><td>20</td></tr> <tr><td>Avijit</td><td>Sharma</td><td>21</td></tr> <tr><td>Sharanya</td><td>Dutta</td><td>26</td></tr> <tr><td>Nabin</td><td>Roy</td><td>27</td></tr> </tbody> </table> </body>

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
New
var asc = 1, col = 0;
var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
// fill the array with values from the table
    for(i = 0; i < rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
        for(j = 0; j < clen; j++){
        arr[i][j] = cells[j].innerHTML;
        }
    }
// sort the array by the specified column number (col) and order (asc)
arr.sort(function(a, b){
    return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
});
    for(i = 0; i < rlen; i++){
        arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>";
    }
    tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
pending…
Old
var asc = 1, col = 0;var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
// fill the array with values from the table
    for(i = 0; i < rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
        for(j = 0; j < clen; j++){
        arr[i][j] = cells[j].innerHTML;
        }
    }
// sort the array by the specified column number (col) and order (asc)
arr.sort(function(a, b){
    return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
});
// replace existing rows with new rows created from the sorted array
    for(i = 0; i < rlen; i++){
        rows[i].innerHTML = "<td>"+arr[i].join("</td><td>")+"</td>";
    }
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.

0 Comments

Name Surname Age
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27
RajaDey18
MamataSharma20
AvijitSharma21
SharanyaDutta26
NabinRoy27