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

JavaScript performance comparison

Revision 72 of this test case created by Nguyen Trang Hong Bao on 20th June 2012

Info

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

Preparation code

<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>
<script>
  Benchmark.prototype.setup = function() {
    var numberOfRow = 100;
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test		Ops/sec
JQueryTemplate	`var html1 = $("#jqueryTmpl").tmpl(data);`	pending…
PrecompiledJQueryTemplate	`var html2 = $.tmpl("precompiledJqueryTmpl", data);`	pending…
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('');	pending…
Underscore.js	`var html4 = _.template(underscoreTmplOrigin, {rows: data})`	pending…
Mustache.js	`var html5 = Mustache.to_html(mustacheTmpl, dataObject);`	pending…
MustacheMilk	`Milk.render(milkTmpl, dataObject);`	pending…
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('');	pending…
Jsrender	`var html8 = jsRenderTmpl.render(dataObject);`	pending…
Handlebars.js	`var html9 = handlebarsTmpl(data);`	pending…
ICanHaz.js	`var html10 = ich.icanhazTmpl(dataObject);`	pending…
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('');	pending…
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('');	pending…
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>'; }	pending…
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>'; }	pending…
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>'); }	pending…
Hogan.js	`hoganTemplate.render(dataObject);`	pending…
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>'; }	pending…
Handlebar.js (precompiled)	`var html18 = handlebarsPrecompiled(dataObject);`	pending…
Kendo UI Templates	`kendouiTemplate(dataObject);`	pending…
JQuote2	`$.jqote(jqote2Template, dataObject);`	pending…
Resig Micro-Templating with String concat	`resigTemplate3(data);`	pending…
John Resig's Micro-Templating	`resig_micro_func(data);`	pending…
Kendo UI Templates_Not UseWithBlock	`kendouiTemplate2(data);`	pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

Revision 1: published by Chi Chan on 5th January 2011
Revision 5: published by Chi Chan on 6th January 2011
Revision 6: published by Sharath Satish on 18th July 2011
Revision 7: published on 27th July 2011
Revision 8: published by Anil K on 27th July 2011
Revision 9: published by Kevin Mee on 9th August 2011
Revision 10: published on 24th August 2011
Revision 11: published on 24th August 2011 and last updated on 25th August 2011
Revision 12: published by Harry Brundage on 25th August 2011
Revision 13: published on 25th August 2011
Revision 15: published by Bryan Chow on 16th September 2011
Revision 16: published on 10th October 2011
Revision 17: published on 14th November 2011
Revision 18: published on 14th November 2011
Revision 19: published on 22nd November 2011
Revision 20: published on 1st December 2011
Revision 21: published by Bharath on 9th December 2011
Revision 23: published by Sammy on 12th December 2011
Revision 25: published on 11th January 2012
Revision 30: published on 13th January 2012
Revision 31: published on 31st January 2012
Revision 32: published on 31st January 2012
Revision 33: published on 6th February 2012
Revision 35: published on 6th February 2012
Revision 36: published on 15th February 2012
Revision 37: published on 15th February 2012
Revision 38: published on 1st March 2012
Revision 39: published by andy matthews on 1st March 2012
Revision 40: published on 13th March 2012
Revision 41: published on 19th March 2012
Revision 42: published on 19th March 2012
Revision 43: published on 28th March 2012
Revision 45: published by Dayakar Muluka on 29th March 2012
Revision 46: published on 12th April 2012
Revision 47: published on 12th April 2012
Revision 48: published on 27th April 2012
Revision 49: published on 29th April 2012
Revision 50: published by Mauricio Wolff on 10th May 2012
Revision 51: published by Mauricio Wolff on 10th May 2012
Revision 52: published by Larry Davis on 16th May 2012
Revision 53: published by Nguyen Trang Hong Bao on 5th June 2012
Revision 61: published by Nguyen Trang Hong Bao on 5th June 2012
Revision 62: published by Nguyen Trang Hong Bao on 6th June 2012
Revision 63: published by Nguyen Trang Hong Bao on 6th June 2012
Revision 70: published by Nguyen Trang Hong Bao on 11th June 2012
Revision 71: published by Nguyen Trang Hong Bao on 18th June 2012
Revision 72: published by Nguyen Trang Hong Bao on 20th June 2012
Revision 74: published by atma on 29th June 2012
Revision 76: published on 8th August 2012
Revision 77: published on 14th September 2012
Revision 79: published on 9th November 2012
Revision 80: published on 13th November 2012
Revision 81: published on 13th November 2012
Revision 82: published on 13th November 2012
Revision 83: published on 28th November 2012
Revision 84: published on 13th December 2012
Revision 85: published on 1st January 2013
Revision 86: published on 9th January 2013
Revision 87: published on 12th January 2013
Revision 90: published by Vlad on 3rd April 2013
Revision 91: published on 10th April 2013
Revision 93: published by Leonardo on 16th April 2013
Revision 94: published by Leonardo on 16th April 2013
Revision 95: published by pp on 24th April 2013
Revision 96: published 2 weeks ago
Revision 97: published 2 weeks ago
Revision 98: published 2 weeks ago
Revision 99: published by Leo Sanchez 1 week ago
Revision 100: published by George Reith 2 days ago

1 comment

Joel commented on 6th March 2013: ∞

Lots of errors - the 7 bottom ones failed! Ran with with IE9.