Performance comparison of jQuery Template vs String append vs Other methods for table_Ver02 (v72)

Revision 72 of this benchmark created by Nguyen Trang Hong Bao on

Description

To test performance of jQuery template for outputting 100 rows each with 15 columns where the columns have fields that can trigger events.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://github.com/mhevery/mustache.js/raw/dot-notation/mustache.js"></script>
<script src="http://github.com/pvande/Milk/raw/master/dist/v1.2.0/milk.js"></script>
<script src="https://raw.github.com/Shopify/batman/master/lib/dist/batman.min.js"></script>
<script src="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript"></script>
<script src="https://github.com/andyet/ICanHaz.js/raw/master/ICanHaz.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://twitter.github.com/hogan.js/builds/1.0.5/hogan-1.0.5.js">
</script>
<script src="https://raw.github.com/mgutz/doT/master/doT.runtime.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/aefxx/jQote2/master/jquery.jqote2.min.js"></script>
<script src="http://gist.github.com/raw/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script>
<script src="http://tempojs.com/tempo.js"></script>

<script type="text/javascript">
    $(function() {
        $('body').delegate('#table .edit a, #table .select a', 'click', function() {
            var $td = $(this).closest('td');
            $td.find('input, select').show();
            $td.find('a').hide();
        });
        
        $('body').delegate('#table .edit .cancel, $table .select .cancel', 'click', function() {
            var $td = $(this).closest('td');
            $td.find('input, select').hide();
            $td.find('a').show();
        });     
    }); 
        
        function DummyFunction() {
                var prefix = "Hello";
                var suffix = "Wolrd!";
                var greeting = prefix + " " + suffix;
                alert(greeting);
        }
        
</script>

<script type="text/x-jquery-tmpl" id="jqueryTmpl">
  <tr>
        <td> 
                <td><input type="checkbox" value="${id}" /></td>
                <td>${name}</td>
                <td>${custName}</td>
                <td>${winlost}</td>
                <td>${turnover}</td>
                <td>${margin}</td>
                <td>${betcount}</td>
                <td><div class="ipViewLink" onclick="DummyFunction();">${ip}</div></td>
                <td>${hasData}</td>
                <td>${sporttypeId}</td>
                <td>${sporttypeName}</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>
        </tr>
</script>

<script id="jsrendertmpl" type="text/x-jsrender">
    {{for rows}}
    <tr> 
      <td><input type = 'checkbox' value = '{{:id}}' /></td>
      <td>{{:name}}</td>
      <td>{{:custName}}</td>
      <td>{{:winlost}}</td>
      <td>{{:turnover}}</td>
      <td>{{:margin}}</td>
      <td>{{:betcount}}</td>
          <td><div class='ipViewLink' onclick='DummyFunction();'>{{:ip}}</div></td>
      <td>{{:hasData}}</td>
      <td>{{:sporttypeId}}</td>
      <td>{{:sporttypeName}}</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>
    </tr>
        {{/for}}
</script>

<script type="text/x-handlebars-template" id="handlebarsTmpl">
        {{#each this}}
        {{#with this}}
        <tr> 
      <td><input type = "checkbox" value = "{{id}}" /></td>
      <td>{{name}}</td>
      <td>{{custName}}</td>
      <td>{{winlost}}</td>
      <td>{{turnover}}</td>
      <td>{{margin}}</td>
      <td>{{betcount}}</td>
          <td><div class="ipViewLink" onclick="DummyFunction();">{{ip}}</div></td>
      <td>{{hasData}}</td>
      <td>{{sporttypeId}}</td>
      <td>{{sporttypeName}}</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>
    </tr>
        {{/with}}
        {{/each}}
        
</script>

<script type="text/html" id="icanhazTmpl">
        {{#rows}}
        <tr> 
      <td><input type = "checkbox" value = "{{id}}" /></td>
      <td>{{name}}</td>
      <td>{{custName}}</td>
      <td>{{winlost}}</td>
      <td>{{turnover}}</td>
      <td>{{margin}}</td>
      <td>{{betcount}}</td>
          <td><div class="ipViewLink" onclick="DummyFunction();">{{ip}}</div></td>
      <td>{{hasData}}</td>
      <td>{{sporttypeId}}</td>
      <td>{{sporttypeName}}</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>
    </tr>
        {{/rows}}

</script>
 
<script id="kendouiTemplate" type="text/x-kendo-template">
        <div id="content">
                <# for (var i = 0, l = rows.length; i < l; i++) { #>                    
                        <tr>
                          <td><input type = 'checkbox' value = '<#= rows[i].id #>' /></td>
                          <td><#= rows[i].name #></td>
                          <td><#= rows[i].custName #></td>
                          <td><#= rows[i].winlost #></td>
                          <td><#= rows[i].turnover #></td>
                          <td><#= rows[i].margin #></td>
                          <td><#= rows[i].betcount #></td>
                          <td><div class='ipViewLink' onclick='DummyFunction();'><#= rows[i].ip #></div></td>
                          <td><#= rows[i].hasData #></td>
                          <td><#= rows[i].sporttypeId #></td>
                          <td><#= rows[i].sporttypeName#></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>
                        </tr >          
                <# } #>
        </div>  
</script>

<script id="kendouiTemplate2" type="text/x-kendo-template">
        <div id="content">
                <# for (var i = 0, l = data.length; i < l; i++) { #>                    
                        <tr>
                          <td><input type = 'checkbox' value = '<#= data[i].id #>' /></td>
                          <td><#= data[i].name #></td>
                          <td><#= data[i].custName #></td>
                          <td><#= data[i].winlost #></td>
                          <td><#= data[i].turnover #></td>
                          <td><#= data[i].margin #></td>
                          <td><#= data[i].betcount #></td>
                          <td><div class='ipViewLink' onclick='DummyFunction();'><#= data[i].ip #></div></td>
                          <td><#= data[i].hasData #></td>
                          <td><#= data[i].sporttypeId #></td>
                          <td><#= data[i].sporttypeName#></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>
                        </tr >          
                <# } #>
        </div>  
</script>

<script id="jqote2Template" type="text/x-jqote-template">
                <div id="content">
                        <% console.log(this.length); %> 
                        <% for (var i = 0, l = this.rows.length; i < l; i++) { %>                       
                                <tr>
                                  <td><input type = 'checkbox' value = '<%= this.rows[i].id %>' /></td>
                                  <td><%= this.rows[i].name %></td>
                                  <td><%= this.rows[i].custName %></td>
                                  <td><%= this.rows[i].winlost %></td>
                                  <td><%= this.rows[i].turnover %></td>
                                  <td><%= this.rows[i].margin %></td>
                                  <td><%= this.rows[i].betcount %></td>
                                  <td><div class='ipViewLink' onclick='DummyFunction();'><%= this.rows[i].ip %></div></td>
                                  <td><%= this.rows[i].hasData %></td>
                                  <td><%= this.rows[i].sporttypeId %></td>
                                  <td><%= this.rows[i].sporttypeName %></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>
                                </tr >          
                        <% } %>
                </div>  
        </script>

<script id="jqote2Template_DirectData" type="text/x-jqote-template">
                <div id="content">
                        <% for (var i = 0, l = this.length; i < l; i++) { %>                    
                                <tr>
                                  <td><input type = 'checkbox' value = '<%= this[i].id %>' /></td>
                                  <td><%= this[i].name %></td>
                                  <td><%= this[i].custName %></td>
                                  <td><%= this[i].winlost %></td>
                                  <td><%= this[i].turnover %></td>
                                  <td><%= this[i].margin %></td>
                                  <td><%= this[i].betcount %></td>
                                  <td><div class='ipViewLink' onclick='DummyFunction();'><%= this[i].ip %></div></td>
                                  <td><%= this[i].hasData %></td>
                                  <td><%= this[i].sporttypeId %></td>
                                  <td><%= this[i].sporttypeName %></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>
                                </tr >          
                        <% } %>
                </div>  
        </script>

<script>
  var data = [];
  var numberOfRow = 100;
  for (var i = 0; i < numberOfRow; i++) {
           var row = {
                        id: i,
                        name: 'punter' + i,
                        custName: 'andrew',
                        winlost: (i * 2.2).toFixed(2),
                        turnover: i,
                        margin: i + '%',
                        betcount: i,
                        ip: '127.127.127.127',
                        hasData: false,
                        sporttypeId: 1,
                        sporttypeName: 'Soccer'
           };  
           data.push(row);
  }
  var dataObject = {rows: data};
  
  $.template("precompiledJqueryTmpl", document.getElementById("jqueryTmpl").innerHTML);
  
  var underscoreTmpl = "\
    <%for(var i=0;i<this.length;i++){%>\
    <%var row=this[i];%> \
    <tr>\
      <td><input type = 'checkbox' value = '<%= row.id%>' /></td>\
      <td><%= row.name%></td>\
      <td><%= row.custName%></td>\
      <td><%= row.winlost%></td>\
      <td><%= row.turnover%></td>\
      <td><%= row.margin%></td>\
      <td><%= row.betcount%></td>\
          <td><div class='ipViewLink' onclick='DummyFunction();'><%= row.ip%></div></td>\
      <td><%= row.hasData%></td>\
      <td><%= row.sporttypeId%></td>\
      <td><%= row.sporttypeName%></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>\
    </tr ><%}%>";
        
 var underscoreTmplOrigin = "\
    <%for(var i=0;i<rows.length;i++){%>\
    <%var row=rows[i];%> \
    <tr>\
      <td><input type = 'checkbox' value = '<%= row.id%>' /></td>\
      <td><%= row.name%></td>\
      <td><%= row.custName%></td>\
      <td><%= row.winlost%></td>\
      <td><%= row.turnover%></td>\
      <td><%= row.margin%></td>\
      <td><%= row.betcount%></td>\
          <td><div class='ipViewLink' onclick='DummyFunction();'><%= row.ip%></div></td>\
      <td><%= row.hasData%></td>\
      <td><%= row.sporttypeId%></td>\
      <td><%= row.sporttypeName%></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>\
    </tr ><%}%>";       


        var mustacheTmpl="\
                {{#rows}}\
                <tr>\
                  <td><input type = 'checkbox' value = '{{id}}' /></td>\
                  <td>{{name}}</td>\
                  <td>{{custName}}</td>\
                  <td>{{winlost}}</td>\
                  <td>{{turnover}}</td>\
                  <td>{{margin}}</td>\
                  <td>{{betcount}}</td>\
                  <td><div class='ipViewLink' onclick='DummyFunction();'>{{ip}}</div></td>\
                  <td>{{hasData}}</td>\
                  <td>{{sporttypeId}}</td>\
                  <td>{{sporttypeName}}</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>\
                </tr >{{/rows}}";       
        
         var milkTmpl="\
                {{#rows}}\
                <tr>\
                  <td><input type = 'checkbox' value = '{{id}}' /> </td>\
                  <td>{{name}}</td>\
                  <td>{{custName}}</td>\
                  <td>{{winlost}}</td>\
                  <td>{{turnover}}</td>\
                  <td>{{margin}}</td>\
                  <td>{{betcount}}</td>\
                  <td><div class='ipViewLink' onclick='DummyFunction();'>{{ip}}</div></td>\
                  <td>{{hasData}}</td>\
                  <td>{{sporttypeId}}</td>\
                  <td>{{sporttypeName}}</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>\
                </tr >{{/rows}}";
        
        var jsRenderTmpl = $.templates( "#jsrendertmpl" );      
        var handlebarsTmpl = Handlebars.compile($("#handlebarsTmpl").html());   

var hoganTemplate = Hogan.compile("{{#rows}}\
        <tr>\
                  <td><input type = 'checkbox' value = '{{id}}' /></td>\
                  <td>{{name}}</td>\
                  <td>{{custName}}</td>\
                  <td>{{winlost}}</td>\
                  <td>{{turnover}}</td>\
                  <td>{{margin}}</td>\
                  <td>{{betcount}}</td>\
                  <td><div class='ipViewLink' onclick='DummyFunction();'>{{ip}}</div></td>\
                  <td>{{hasData}}</td>\
                  <td>{{sporttypeId}}</td>\
                  <td>{{sporttypeName}}</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>\
                </tr >\
        {{/rows}}");
        
    var handlebarsPrecompiled = Handlebars.compile("{{#each rows}}\
        {{#with this}}\
        <tr>\
      <td><input type = 'checkbox' value = '{{id}}' /></td>\
      <td>{{name}}</td>\
      <td>{{custName}}</td>\
      <td>{{winlost}}</td>\
      <td>{{turnover}}</td>\
      <td>{{margin}}</td>\
      <td>{{betcount}}</td>\
          <td><div class='ipViewLink' onclick='DummyFunction();'>{{ip}}</div></td>\
      <td>{{hasData}}</td>\
      <td>{{sporttypeId}}</td>\
      <td>{{sporttypeName}}</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>\
    </tr>\
        {{/with}}\
        {{/each}}");
var kendouiTemplate = kendo.template($("#kendouiTemplate").html());
var kendouiTemplate2 = kendo.template($("#kendouiTemplate2").html(), {useWithBlock:false});
 var jqote2Template = $.jqotec($('#jqote2Template'));
 var jqote2Template_DirectData= $.jqotec($('#jqote2Template_DirectData'));

var resigTemplate3 = tmpl3("<div id='content'>\
                        <% for (var i = 0, l = data.length; i < l; i++) { %>\
                                <tr>\
                                  <td><input type = 'checkbox' value = '<%= data[i].id %>' /></td>\
                                  <td><%= data[i].name %></td>\
                                  <td><%= data[i].custName %></td>\
                                  <td><%= data[i].winlost %></td>\
                                  <td><%= data[i].turnover %></td>\
                                  <td><%= data[i].margin %></td>\
                                  <td><%= data[i].betcount %></td>\
                                  <td><div class='ipViewLink' onclick='DummyFunction();'><%= data[i].ip %></div></td>\
                                  <td><%= data[i].hasData %></td>\
                                  <td><%= data[i].sporttypeId %></td>\
                                  <td><%= data[i].sporttypeName %></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>\
                                </tr>\
                        <% } %>\
                </div>");


function resig_micro(str) {
    var strFunc =
        "var p=[];p.push('" +
        str.replace(/[\r\t\n]/g, " ")
        .replace(/'(?=[^#]*#>)/g, "\t")
        .split("'").join("\\'")
        .split("\t").join("'")
        .replace(/<#=(.+?)#>/g, "',$1,'")
        .split("<#").join("');")
        .split("#>").join("p.push('")
        + "');return p.join('');";
    return new Function("data", strFunc);
}

// Template (identical to Kendo UI template syntax)
var resig_micro_template = "<div id='content'><# for (var i = 0, l = data.length; i < l; i++) { #><tr><td><input type = 'checkbox' value = '<#= data[i].id #>' /></td><td><#= data[i].name #></td><td><#= data[i].custName #></td><td><#= data[i].winlost #></td><td><#= data[i].turnover #></td><td><#= data[i].margin #></td><td><#= data[i].betcount #></td><td><div class='ipViewLink' onclick='DummyFunction();'><#= data[i].ip #></div></td><td><#= data[i].hasData #></td><td><#= data[i].sporttypeId #></td><td><#= data[i].sporttypeName#></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></tr><# } #></div>";

// Precompile
var resig_micro_func = resig_micro(resig_micro_template);


</script>

Setup

var numberOfRow = 100;

Test runner

Ready to run.

Testing in
TestOps/sec
JQueryTemplate
var html1 = $("#jqueryTmpl").tmpl(data);
ready
PrecompiledJQueryTemplate
var html2 = $.tmpl("precompiledJqueryTmpl", data);
ready
StringPaddingMethod
var s = [];
for (var i = 0; i < numberOfRow; i++) {
        var html3_1 = '<tr>\
                                <td><input type="checkbox" value="' + data[i].id + '" /></td>\
                                <td>' + data[i].name + '</td>\
                                <td>' + data[i].custName + '</td>\
                                <td>' + data[i].winlost + '</td>\
                                <td>' + data[i].turnover + '</td>\
                                <td>' + data[i].margin + '</td>\
                                <td>' + data[i].betcount + '</td>\
                                <td><div class="ipViewLink">' + data[i].ip + '</div></td>\
                                <td>' + data[i].hasData + '</td>\
                                <td>' + data[i].sporttypeId + '</td>\
                                <td>' + data[i].sporttypeName + '</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>\
                        </tr>';
        s.push(html3_1);                                
}
var html3_2 = s.join('');
ready
Underscore.js
var html4 = _.template(underscoreTmplOrigin, {rows: data})
ready
Mustache.js
var html5 = Mustache.to_html(mustacheTmpl, dataObject);  
ready
MustacheMilk
Milk.render(milkTmpl, dataObject);  
ready
StringPaddingMethod02
var s = [];
for (var i = 0; i < numberOfRow; i++) {
        s.push('<tr>\
                                <td><input type="checkbox" value="' + data[i].id + '" /></td>\
                                <td>' + data[i].name + '</td>\
                                <td>' + data[i].custName + '</td>\
                                <td>' + data[i].winlost + '</td>\
                                <td>' + data[i].turnover + '</td>\
                                <td>' + data[i].margin + '</td>\
                                <td>' + data[i].betcount + '</td>\
                                <td><div class="ipViewLink">' + data[i].ip + '</div></td>\
                                <td>' + data[i].hasData + '</td>\
                                <td>' + data[i].sporttypeId + '</td>\
                                <td>' + data[i].sporttypeName + '</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>\
                        </tr>');                        
}
var html7 = s.join('');
 
ready
Jsrender
var html8 = jsRenderTmpl.render(dataObject);
ready
Handlebars.js
var html9 = handlebarsTmpl(data);
ready
ICanHaz.js
var html10 = ich.icanhazTmpl(dataObject);
ready
StringPaddingMethod03
var s = [];
for (var i = 0; i < numberOfRow; i++) {
        s.push('<tr>');
        s.push('<td><input type="checkbox" value="' + data[i].id + '" /></td>');
        s.push('<td>' + data[i].name + '</td>');
        s.push('<td>' + data[i].custName + '</td>');
        s.push('<td>' + data[i].winlost + '</td>');
        s.push('<td>' + data[i].turnover + '</td>');
        s.push('<td>' + data[i].margin + '</td>');
        s.push('<td>' + data[i].betcount + '</td>');
        s.push('<td><div class="ipViewLink" onclick="DummyFunction();">' + data[i].ip + '</div></td>');
        s.push('<td>' + data[i].hasData + '</td>');
        s.push('<td>' + data[i].sporttypeId + '</td>');
        s.push('<td>' + data[i].sporttypeName + '</td>');
        s.push('<td class="edit">');
        s.push('<a>Edit</a>');
        s.push('<input style="display:none;" type="hidden" value="Blah" />');
        s.push('<input class="cancel" type="button" value="cancel" />');
        s.push('</td>');
        s.push('<td class="select">');
        s.push('<a>Select</a>');
        s.push('<select style="display:none;">');
        s.push('<option>0</option>');
        s.push('<option>1</option>');
        s.push('<option>2</option>');
        s.push('<option>3</option>');
        s.push('<option>4</option>');
        s.push('<option>5</option>');
        s.push('<option>6</option>');
        s.push('<option>7</option>');
        s.push('<option>8</option>');
        s.push('<option>9</option>');
        s.push('<option>10</option>');
        s.push('</select>');
        s.push('<input class="cancel" type="button" value="cancel" />');
        s.push('</td>');
        s.push('<td>More string</td>');
        s.push('<td>More string</td>');
        s.push('</tr>');                        
}
var html11 = s.join('');
 
ready
StringPaddingMethod04
var s = [];
for (var i = 0; i < numberOfRow; i++) {
        s.push('<tr>\
                                <td><input type="checkbox" value="');
        s.push(data[i].id);
        s.push('" /></td>\
                                <td>');
        s.push(data[i].name);
        s.push('</td>\
                                <td>');
        s.push(data[i].custName);
        s.push('</td>\
                                <td>');
        s.push(data[i].winlost);
        s.push('</td>\
                                <td>');
        s.push(data[i].turnover);
        s.push('</td>\
                                <td>');
        s.push(data[i].margin);
        s.push('</td>\
                                <td>');
        s.push(data[i].betcount);
        s.push('</td>\
                                <td><div class="ipViewLink" onclick="DummyFunction();">');
        s.push(data[i].ip);
        s.push('</div></td>\
                                <td>');
        s.push(data[i].hasData);
        s.push('</td>\
                                <td>');
        s.push(data[i].sporttypeId);
        s.push('</td>\
                                <td>');
        s.push(data[i].sporttypeName);
        s.push('</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>\
                        </tr>');                        
}
var html12= s.join('');
ready
StringConcat
var s = [];
var html3_1 = '';
for (var i = 0; i < numberOfRow; i++) {
        html3_1 += '<tr>\
                                        <td><input type="checkbox" value="' + data[i].id + '" /></td>\
                                        <td>' + data[i].name + '</td>\
                                        <td>' + data[i].custName + '</td>\
                                        <td>' + data[i].winlost + '</td>\
                                        <td>' + data[i].turnover + '</td>\
                                        <td>' + data[i].margin + '</td>\
                                        <td>' + data[i].betcount + '</td>\
                                        <td><div class="ipViewLink" onclick="DummyFunction();">' + data[i].ip + '</div></td>\
                                        <td>' + data[i].hasData + '</td>\
                                        <td>' + data[i].sporttypeId + '</td>\
                                        <td>' + data[i].sporttypeName + '</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>\
                                </tr>';         
}
ready
StringConcatVer02
var s = [];
var html14_1 = '';
var reportDetail = null;
for (var i = 0; i < numberOfRow; i++) {
        reportDetail = data[i];
        html14_1 += '<tr>\
                                        <td><input type="checkbox" value="' + reportDetail.id + '" /></td>\
                                        <td>' + reportDetail.name + '</td>\
                                        <td>' + reportDetail.custName + '</td>\
                                        <td>' + reportDetail.winlost + '</td>\
                                        <td>' + reportDetail.turnover + '</td>\
                                        <td>' + reportDetail.margin + '</td>\
                                        <td>' + reportDetail.betcount + '</td>\
                                        <td><div class="ipViewLink" onclick="DummyFunction();">' + reportDetail.ip + '</div></td>\
                                        <td>' + reportDetail.hasData + '</td>\
                                        <td>' + reportDetail.sporttypeId + '</td>\
                                        <td>' + reportDetail.sporttypeName + '</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>\
                                </tr>';         
}

 
ready
StringConcatVer03
var s = [];
var html15_1 = '';
var reportDetail = null;
for (var i = 0; i < numberOfRow; i++) {
        reportDetail = data[i];
        html15_1 += ('<tr>\
                                        <td><input type="checkbox" value="').concat(reportDetail.id, '" /></td>\
                                        <td>' , reportDetail.name, '</td>\
                                        <td>' , reportDetail.custName , '</td>\
                                        <td>' , reportDetail.winlost , '</td>\
                                        <td>' , reportDetail.turnover , '</td>\
                                        <td>' , reportDetail.margin , '</td>\
                                        <td>' , reportDetail.betcount , '</td>\
                                        <td><div class="ipViewLink" onclick="DummyFunction();">' , reportDetail.ip , '</div></td>\
                                        <td>' , reportDetail.hasData , '</td>\
                                        <td>' , reportDetail.sporttypeId , '</td>\
                                        <td>' , reportDetail.sporttypeName , '</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>\
                                </tr>');                
}
 
ready
Hogan.js
hoganTemplate.render(dataObject);
 
ready
doT encodeHTML like rest
var html3_17 = "";
for (var i = 0; i < numberOfRow; i++) {
        html3_17 += '<tr>\
                                <td><input type="checkbox" value="' + __dotEncodeHTML(data[i].id) + '" /></td>\
                                <td>' + __dotEncodeHTML(data[i].name) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].custName) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].winlost) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].turnover) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].margin) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].betcount) + '</td>\
                                <td><div class="ipViewLink" onclick="DummyFunction();">' + __dotEncodeHTML(data[i].ip) + '</div></td>\
                                <td>' + __dotEncodeHTML(data[i].hasData) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].sporttypeId) + '</td>\
                                <td>' + __dotEncodeHTML(data[i].sporttypeName) + '</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>\
                        </tr>';                 
}
 
ready
Handlebar.js (precompiled)
var html18 = handlebarsPrecompiled(dataObject);
ready
Kendo UI Templates
kendouiTemplate(dataObject);
ready
JQuote2
$.jqote(jqote2Template, dataObject);
ready
Resig Micro-Templating with String concat
resigTemplate3(data);
ready
John Resig's Micro-Templating
resig_micro_func(data);
ready
Kendo UI Templates_Not UseWithBlock
kendouiTemplate2(data);
ready

Revisions

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