Table Render

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="cont">
</div>
<script>
  Benchmark.prototype.teardown = function() {
    var rowCount = $("#cont tr").length;
    $("#cont").html("");
    
    if (rowCount == 0) {
      throw "Found " + rowCount + " rows!";
    }
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery
 
var table = $('<table>', {
  css: {
    borderCollapse: 'collapse',
    borderSpacing: 0,
    tableLayout: 'fixed',
    width: '1px',
    height: '1px'
  }
});

var tbody = $('<tbody>');

for (var i = 0; i < 10; i++) {
  var row = $('<tr>');
  for (var j = 0; j < 10; j++) {
    var cell = $('<td>', {
      width: '100px',
      height: '100px'
    });
    cell.appendTo(row);
  }
  row.appendTo(tbody);
}

tbody.appendTo(table);
$("#cont").append(table);
 pending…
String concatenation
 
var table = '<table style="border-collapse:collapse;border-spacing:0;table-layout:fixed;width:1px;height:1px">';

for (var i = 0; i < 10; i++) {
  var row = '<tr>';
  for (var j = 0; j < 10; j++) {
    row += '<td style="width:100px;height:100px;"></td>';
  }
  table += row + '</tr>';
}

table += '</table>';
$("#cont").append(table);
 pending…

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

Compare results of other browsers

0 comments

Add a comment