DOM Insertion jQuery String or createElement (v2)

Revision 2 of this benchmark created on

Description

Building on these Table Insertion tests this evaluates the performance of creating elements in a Document Fragment vs creating from string.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="holder">&nbsp;</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Fragment innerHTML String
var tbl = 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>';
tbl.innerHTML = data;

var e = document.getElementById('holder');
e.appendChild(tbl);
e.innerHTML = '';
ready
Build Fragment with Elements
var ths = ['Employee ID', 'Last Name', 'First Name', 'Phone', 'Username'];
var tds = [
 ['123543', 'Davis', 'Kirk', '(415) 333-4334', 'kdavis', ],
 ['127944', 'Miller', 'James', '(415) 333-7566', 'jmiller'],
 ['127373', 'Wilson', 'Alex', '(415) 333-9843', 'awilson'],
 ['125744', 'Moore', 'Albert', '(415) 333-7584', 'amoore'],
 ['120459', 'Taylor', 'Eric', '(415) 333-8343', 'etaylor'],
 ['124847', 'Anderson', 'Vincent', '(415) 333-9584', 'vanderson'],
 ['129283', 'Thomas', 'Anthony', '(415) 333-8483', 'athomas'],
 ['125765', 'Lee', 'John', '(415) 333-5757', 'jlee']
];

var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
// Header Row
var th_row = tr.cloneNode(true);
var th = document.createElement('th')
for (var i = 0, ilen = ths.length; i < ilen; i++) {
 var cur_th = th.cloneNode(true);
 cur_th.innerHTML = ths[i];
 th_row.appendChild(cur_th);
}
tbody.appendChild(th_row);
// Data Rows
var td = document.createElement('td');
for (var i = 0, ilen = tds.length; i < ilen; i++) {
 var row = tr.cloneNode(true);
 for (var j = 0, jlen = tds[i].length; j < jlen; j++) {
  var cur_td = td.cloneNode(true);
  cur_td.innerHTML = tds[i][j];
  row.appendChild(cur_td);
 }
 tbody.appendChild(row);
}
// Make Table
var tbl = document.createElement('table');
tbl.border = 1;
tbl.id = 'data';
tbl.appendChild(tbody);

var e = document.getElementById('holder');
e.appendChild(tbl);
e.innerHTML = '';
ready
jQuery create from String
var e = document.getElementById('holder');

jQuery('<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>').appendTo(e);

e.innerHTML = '';
ready
Alternative jQuery
jQuery('#holder').append('<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>').html('');
ready

Revisions

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