jQuery Templates performance (v9)

Revision 9 of this benchmark created on

Description

Testing 100 rows x 10 columns.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.extend(function(){function c(b){return new a(b)}function a(a){a="string"===typeof a?a:a.html();this.compiledTemplate=this.compile(a)}var b={};b.ending=/[\r\n]+/g;b.tag=/<(\/)?jtml:(\w+)((?:[^>"\/]|"[^"]*")*)\/?>/g;b.line=/^(.+)$/gm;b.quote=/(")/g;b.value=/\$\{([^}]+)\}/g;b.script=/__t(\d+)__/g;b.attribute=/(\w+)\s*=\s*"([^"]*)"/g;a.prototype.compile=function(a){var c=this;var d=[];var e=["var __output=[];","var __o=0;"];a=a.replace(b.ending," ");a=a.replace(b.tag,function(a,b,e,f){if(b){d.push(c.convertCloseTag(e))}else{d.push(c.convertOpenTag(e,f))}return"__t"+(d.length-1)+"__"});a.replace(b.line,function(a,c){var f=c.replace(b.quote,"\\$1");f=f.replace(b.value,function(a,b){return'"+('+b+')+"'});f=f.replace(b.script,function(a,b){return'";'+d[parseInt(b)]+';__output[__o++]="'});e.push('__output[__o++]="'+f+'";')});e.push('return __output.join("\\n");');return e.join("\n")};a.prototype.convertCloseTag=function(a){switch(a){case"if":return"}";case"loop":return"}";default:return"/* Unknown CLOSE */"}};a.prototype.convertOpenTag=function(a,b){var c=this.parseMetaData(b);switch(a){case"else":if("test"in c){return"}else if("+c.test+"){"}else{return"}else{"};case"if":return"if("+c.test+"){";case"include":return"__output[__o++]=(function(){"+this.compile($(c.template).html())+"})();";case"loop":if(c.collection){if(this.isArray(c.collection)){return"for(var __"+c.index+"=0;__"+c.index+"<"+c.collection+".length;++__"+c.index+"){"+("key"in c?"var "+c.key+"=__"+c.index+";":"")+"var "+c.index+"="+c.collection+"[__"+c.index+"];"}else{return"for(var __"+c.index+" in "+c.collection+"){"+("key"in c?"var "+c.key+"=__"+c.index+";":"")+"var "+c.index+"="+c.collection+"[__"+c.index+"];"}}else{return"for(var __"+c.index+"="+(c.from||0)+";__"+c.index+"<="+c.to+";__"+c.index+"+="+(c.step||1)+"){"+"var "+c.index+"=__"+c.index+";"};default:return"/* Unknown OPEN */"}};a.prototype.isArray=function(a){return $.isArray(a)};a.prototype.parseMetaData=function(a){var c=[];a.replace(b.attribute,function(a,b,d){c[b]=d});return c};a.prototype.render=function(a){function c(a){var c=[];var d=0;for(var e in a){c[d++]="var "+e+'=_map["'+e+'"];'}c[d++]="return (function(){"+b.compiledTemplate+"})();";var f=new Function("_map",c.join("\n"));return f(a)}var b=this;if(this.isArray(a)){var d=0,e=a.length,f=[];for(;d<e;++d){f.push(c(a[d]))}return f.join("")}else{return c(a)}};return{jtml:c}}())
</script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="x-jquery-tmpl" id="bigRowTemplate">
 <tr>
    <td>${id}</td>
    <td>${foo}</td>
    <td>${fifty}</td>
    <td>${two50five}</td>
    <td>${website}</td>
    <td>${bar}</td>
    <td>${baz}</td>
    <td>${thirty}</td>
    <td>${firstName}</td>
    <td>${lastName}</td>
  </tr>
</script>

<script type="text/jtml" class="template masterTemplate">
        <jtml:loop index="item" collection="data">
                <jtml:include template="script.template.bigRowTemplate" />
        </jtml:loop>
</script>

<script type="text/jtml" class="template bigRowTemplate">
 <tr>
    <td>${item.id}</td>
    <td>${item.foo}</td>
    <td>${item.fifty}</td>
    <td>${item.two50five}</td>
    <td>${item.website}</td>
    <td>${item.bar}</td>
    <td>${item.baz}</td>
    <td>${item.thirty}</td>
    <td>${item.firstName}</td>
    <td>${item.lastName}</td>
  </tr>
</script>

<script type="text/jtml" class="template bigRowSingleTemplate">
 <tr>
    <td>${id}</td>
    <td>${foo}</td>
    <td>${fifty}</td>
    <td>${two50five}</td>
    <td>${website}</td>
    <td>${bar}</td>
    <td>${baz}</td>
    <td>${thirty}</td>
    <td>${firstName}</td>
    <td>${lastName}</td>
  </tr>
</script>

<table id="target"></table>

<script>
  var data = [];
  
  for (var i = 0; i < 100; i++) {
   var row = {
    id: i,
    foo: 'foo',
    fifty: 50,
    two50five: 255,
    website: 'http://abc.xyz.com',
    bar: 'bar',
    baz: 'baz',
    thirty: 30,
    firstName: 'john',
    lastName: 'doe'
   };
  
   data.push(row);
  }
</script>

Teardown


    $('#target').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Templates
$('#bigRowTemplate').tmpl(data).appendTo('#target');
ready
Standard DOM innerHTML append
var l = data.length, item, html = '';

for (var i = 0; i < l; i++) {
 item = data[i];

 html += '<tr>' +
    '<td>' + item.id + '</td>' +
    '<td>' + item.foo + '</td>' +
    '<td>' + item.fifty + '</td>' +
    '<td>' + item.two50five + '</td>' +
    '<td>' + item.website + '</td>' +
    '<td>' + item.bar + '</td>' +
    '<td>' + item.baz + '</td>' +
    '<td>' + item.thirty + '</td>' +
    '<td>' + item.firstName+ '</td>' +
    '<td>' + item.lastName + '</td>' +
  '</tr>';
}

document.getElementById('target').innerHTML = html;
ready
jQuery Templates (compiled template)
var template = $('#bigRowTemplate').template();
var html     = $.tmpl(template, data);

$('#target').append(html);
ready
JTML compiled template
var template = $.jtml($('script.template.masterTemplate'));
var html     = template.render({ data: data });

document.getElementById('target').innerHTML = html;
ready
JTML compiled template without include
var template = $.jtml($('script.template.bigRowSingleTemplate'));
var html     = template.render(data);

document.getElementById('target').innerHTML = html;
ready

Revisions

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