Editing Performance comparison of jQuery Template vs underscore vs string append for table

This edit will create a new revision.

Your details (optional)

Name

Email (won’t be displayed; might be used for Gravatar)

URL

Test case details

Title *

Published (uncheck if you want to fiddle around before making the page public)

Description (in case you feel further explanation is needed)(Markdown syntax is allowed)

Are you a spammer? (just answer the question)

Preparation code

Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries)

$('body').delegate('#table .edit .cancel, $table .select .cancel', 'click', function() {
      var $td = $(this).closest('td');
      $td.find('input, select').hide();
      $td.find('a').show();
    });
  });
</script>
<script type="text/x-jquery-tmpl" id="tmplRow">
  < tr > < td > < input type = "checkbox"
  value = "${id}" / > < /td>
  <td>${firstName} ${lastName}</td > < td class = "edit" > < a > Edit < /a>
    <input style="display:none;" type="hidden" value="Blah" / > < input class = "cancel"
  type = "button"
  value = "cancel" / > < /td>
  <td class="select">
      <a>Select</a > < select style = "display:none;" > < option > 0 < /option>
        <option>1</option > < option > 2 < /option>
        <option>3</option > < option > 4 < /option>
        <option>5</option > < option > 6 < /option>
        <option>7</option > < option > 8 < /option>
        <option>9</option > < option > 10 < /option>
       </select > < input class = "cancel"
  type = "button"
  value = "cancel" / > < /td>
   <td>More string</td > < td > More string < /td>
   <td>More string</td > < td > More string < /td>
   <td>More string</td > < td > More string < /td>
</tr >
</script>

<table id="batman_template">
  <tr data-foreach-person="data">
    <td><input type="checkbox"  data-bind="person.id"/></td>
    <td data-bind="person.firstName | append ' ' | append person.lastName"></td >
    <td class="edit">
      <a> Edit </a>
      <input style="display:none;" type="hidden" value="Blah"/>
      <input class="cancel" type="button" value="cancel" />
    </td>
    <td class="select">
      <a>Select</a>
      <select style="display:none;">
        <option>0</option>
        <option>1</option > < option > 2 </option>
        <option>3</option > < option > 4 </option>
        <option>5</option > < option > 6 </option>
        <option>7</option > < option > 8 </option>
        <option>9</option > < option > 10 </option>
      </select>
      <input class="cancel" type="button" value="cancel" />
   </td>
   <td>More string</td > <td> More string </td>
   <td>More string</td > <td> More string </td>
   <td>More string</td > <td> More string </td>
  </tr>
</table>
<script>
  var data = [];
  
  for (var i = 0; i < 100; i++) {
    var row = {
      id: i,
      firstName: 'john',
      lastName: 'doe'
    };
  
    data.push(row);
  }
  
  $.template("savedTmpl", document.getElementById("tmplRow").innerHTML);
  
  var underscoreTmpl = "\
    <%for(var i=0;i<rows.length;i++){%>\
    <%var row=rows[i];%> \
    <tr> \
      <td> <input type = 'checkbox' value = '<%= row.id%>' /> </td>\
      <td><%= row.firstname%> <%= row.lastname%></td> \
      <td class = 'edit'> \
        <a> Edit </a>\
        <input style='display:none;' type='hidden' value='Blah' /> \
        <input class = 'cancel' type = 'button' value = 'cancel' /> \
      </td>\
      <td class='select'>\
          <a>Select</a> \
          <select style = 'display:none;'> \
            <option>0</option>\
            <option>1</option> \
            <option>2</option>\
            <option>3</option> \
            <option>4</option>\
            <option>5</option> \
            <option>6</option>\
            <option>7</option> \
            <option>8</option>\
            <option>9</option> \
            <option>10</option>\
           </select> \
            <input class = 'cancel' type = 'button' value = 'cancel' /> \
       </td>\
       <td>More string</td> \
       <td>More string</td>\
       <td>More string</td> \
       <td>More string</td>\
       <td>More string</td> \
       <td>More string</td>\
    </tr ><%}%>";
  var underscorePrecompiled = _.template(underscoreTmpl);

Title

Async (check if this is an asynchronous test)

Code

Milk.render(milkTmpl, {rows: data});