jQuery DOM Table Insert Efficiency (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="holder"></div>
<script>
  var frag = document.createDocumentFragment();
  var data = '<table border="1" id="data"> <tbody> <tr> <th>Employee ID </th> <th>Last Name </th> <th>First Name </th> <th>Phone</th> <th>Username</th> </tr> <tr> <td>123543</td> <td>Davis</td> <td>Kirk</td> <td>(415) 333-4334 </td> <td>kdavis</td> </tr><tr> <td>127944</td> <td>Miller</td> <td>James</td> <td>(415) 333-7566 </td> <td>jmiller</td> </tr><tr> <td>127373</td> <td>Wilson</td> <td>Alex</td> <td>(415) 333-9843 </td> <td>awilson</td> </tr><tr> <td>125744</td> <td>Moore</td> <td>Albert</td> <td>(415) 333-7584 </td> <td>amoore</td> </tr><tr> <td>120459</td> <td>Taylor</td> <td>Eric</td> <td>(415) 333-8343 </td> <td>etaylor</td> </tr><tr> <td>124847</td> <td>Anderson</td> <td>Vincent</td> <td>(415) 333-9584 </td> <td>vanderson</td> </tr><tr> <td>129283</td> <td>Thomas</td> <td>Anthony</td> <td>(415) 333-8483 </td> <td>athomas</td> </tr><tr> <td>125765</td> <td>Lee</td> <td>John</td> <td>(415) 333-5757</td> <td>jlee</td> </tr> </tbody> </table>';
  frag.innerHTML = data;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery append()
$(document).ready(function() {
 $('#holder').append(frag);
});
ready
jQuery html()
$(document).ready(function() {
 $('#holder').html(data);
});
ready
Plain innerHTML
$(document).ready(function() {
 var e = document.getElementById('holder');
 e.innerHTML = data;
});
ready
Fragment Append
$(document).ready(function() {
 var e = document.getElementById('holder');
 e.appendChild(frag);
});
ready

Revisions

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