jQuery Templates performance (v8)

Revision 8 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">
function JTMLTemplate(a){this.template=typeof a==="string"?a:a.html();this.compiledTemplate=this.compile(this.template)}JTMLTemplate.prototype={compile:function(a){var b=this;var c=[];var d=["var __output = [];","var __o = 0;"];a=a.replace(new RegExp("[\\r\\n]+","g")," ");a=a.replace(new RegExp('<(/)?jtml:(\\w+)((?:[^>"/]|"[^"]*")*)/?>',"g"),function(a,d,e,f){if(d){c.push(b.convertCloseTag(e))}else{c.push(b.convertOpenTag(e,f))}return"__t"+(c.length-1)+"__"});a.replace(new RegExp("^(.+)$","gm"),function(a,b){var e=b.replace(new RegExp('(")',"g"),"\\$1");e=e.replace(new RegExp("\\$\\{([^}]+)\\}","g"),function(a,b){return'" + ( '+b+' ) + "'});e=e.replace(new RegExp("__t(\\d+)__","g"),function(a,b){return'"; '+c[parseInt(b)]+'; __output[ __o++ ] = "'});d.push('__output[ __o++ ] = "'+e+'";')});d.push('return( __output.join( "\\n" ) );');return d.join("\n")},convertCloseTag:function(a){switch(a){case"if":return" } ";break;case"loop":return" } ";break;default:return"/* Unknown CLOSE */";break}},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 { "}break;case"if":return" if ( "+c.test+" ){ ";break;case"include":return"__output[ __o++ ] = (function(){ "+this.compile($(c.template).html())+" })();";break;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+";"}break;default:return"/* Unknown OPEN */";break}},isArray:function(a){return $.isArray(a)},parseMetaData:function(a){var b={};a.replace(new RegExp('(\\w+)\\s*=\\s*"([^"]*)"',"g"),function(a,c,d){b[c]=d});return b},render:function(a){var b=[];var c=0;for(var d in a){b[c++]="var "+d+' = _map[ "'+d+'" ];'}b[c++]="return( (function(){ "+this.compiledTemplate+" })() );";var e=new Function("_map",b.join("\n"));return e(a)}}
</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>

<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 = new JTMLTemplate($('script.template.masterTemplate'));
var html     = template.render({ data: data });

document.getElementById('target').innerHTML = html;
ready
JTML compiled template without include
/**
 * not working :(
 */

/*
var template = new JTMLTemplate($('script.template.bigRowTemplate'));
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.