Build Table (v8)

Revision 8 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<table id="table">
<tbody>
</tbody>
</table>

Setup

var tbjQuery = $("#table > tbody");
    var tbNative = tbjQuery[0];
    var count = 10;
    
    var exObj = {
      propA: "A",
      propB: "B"
    };

Teardown


    tbjQuery.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
Create Element
for (var i = 0; i <= count; i++) {
  var subElemTr = document.createElement("tr"),
    subElemTd = document.createElement("td"),
    subElemTdText = document.createTextNode(exObj.propB);

  subElemTd.appendChild(subElemTdText);
  subElemTr.appendChild(subElemTd);

  tbNative.appendChild(subElemTr);
}
ready
Concatiation
var complete;
for (var i = 0; i <= count; i++) {
  complete += "<tr><td>" + exObj.propB + "</td></tr>";
}

tbNative.innerHtml = complete;
ready
Array join
var buffer = [];
var bufferIndex = -1;

for (var i = 0; i <= count; i++) {
  buffer[++bufferIndex] = "<tr><td>";
  buffer[++bufferIndex] = exObj.propB;
  buffer[++bufferIndex] = "</td></tr>";
}
  tbNative.innerHtml = buffer.join('');
ready
Create Element Document Fragment
var fragment = document.createDocumentFragment();
for (var i = 0; i <= count; i++) {
  var subElemTr = document.createElement("tr"),
    subElemTd = document.createElement("td"),
    subElemTdText = document.createTextNode(exObj.propB);

  subElemTd.appendChild(subElemTdText);
  subElemTr.appendChild(subElemTd);

  fragment.appendChild(subElemTr);
}

tbNative.appendChild(fragment);
ready

Revisions

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