Templating: Kendo vs jQuery vs Sencha

JavaScript performance comparison

Revision 6 of this test case created by Jan

Info

Since this is my very first test on JSPerf, I'd really appreciate any improvements and critics concerning the code and the concept.

Thx

Preparation code

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script src="//extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>

<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>

<script type="text/x-kendo-template" id="kendo_ext"><li><b style="color:${color}">${name}</b> (${origin})</li></script>

<script type="text/x-kendo-template" id="kendo_noUseWithBlock_ext"><li><b style="color:${data.color}">${data.name}</b> (${data.origin})</li></script>

<div style="height:100px;overflow:hidden;width:25%;float:left;font-size:14px;">
   <ul id="result_jquery"></ul>
</div>
<div style="height:100px;overflow:hidden;width:25%;float:left;font-size:14px;">
   <ul id="result_kendo"></ul>
</div>
<div style="height:100px;overflow:hidden;width:25%;float:left;font-size:14px;">
   <ul id="result_sencha"></ul>
</div>
<div style="height:100px;overflow:hidden;width:25%;float:left;font-size:14px;">
   <ul id="result_kendo_noUseWithBlock"></ul>
</div>
<div style="height:100px;overflow:hidden;width:25%;float:left;font-size:14px;">
   <ul id="result_kendo_ext"></ul>
</div>
<div style="height:100px;overflow:hidden;width:25%;float:left;font-size:14px;">
   <ul id="result_kendo_noUseWithBlock_ext"></ul>
</div>
<script>
Benchmark.prototype.setup = function() {
    window.tpl = {};
    tpl.data = [{
            color: '#00FF66',
            name: 'Metallica',
            origin: 'California'
        },{
            color:'#0066FF',
            name:'Blumentopf',
            origin:'Germany'
        },{
            color:'#66FF00',
            name:'Alestorm',
            origin:'Scotland'
        },{
            color:'#6600FF',
            name:'Enter Shikari',
            origin:'England'
    }];
    tpl.length = 250;
    tpl.longtemplate = [];
    var i = 0;
    for (i=0;i<tpl.length;i++) {
     tpl.longtemplate.push('<li><b style="color:${color}">${name}</b> (${origin})</li>');
    }
    tpl.jquery = $.template(tpl.longtemplate.join(''));
    tpl.kendo = kendo.template(tpl.longtemplate.join(''));
   
    tpl.longtemplate = [];
    var i = 0;
    for (i=0;i<tpl.length;i++) {
     tpl.longtemplate.push('<li><b style="color:${data.color}">${data.name}</b> (${data.origin})</li>');
    }
   
    tpl.kendo_noUseWithBlock = kendo.template(tpl.longtemplate.join(''), {useWithBlock: false});
   
    tpl.longtemplate = [];
    tpl.longtemplate.push('<tpl for=".">');
    var i = 0;
    for (i=0;i<tpl.length;i++) {
     tpl.longtemplate.push('<li><b style="color:{color}">{name}</b> ({origin})</li>');
    }
    tpl.longtemplate.push('</tpl>');
   
    tpl.sencha = Ext.create('Ext.XTemplate',tpl.longtemplate.join(''), {compiled: true});
   
    tpl.nodes = {};
    tpl.nodes.jquery = $('#result_jquery');
    tpl.nodes.kendo = $('#result_kendo');
    tpl.nodes.sencha = $('#result_sencha');
    tpl.nodes.kendo_noUseWithBlock = $('#result_kendo_noUseWithBlock');
    /*
    tpl.test = function (out,values,parent,xindex,xcount) {
    var c0=values, p0=parent, n0=xcount, i0=xindex;
    var c1=values, a1=Ext.isArray(c1),p1=(parent=c0),r1=values
    for (var i1=0,n1=a1?c1.length:(c1?1:0), xcount=n1;i1<n1;++i1){
    values=a1?c1[i1]:c1;
    xindex=i1+1;
    out.push('<li><b style="color:');
    out.push(String((values['color'] === undefined ? '' : values['color'])));
    out.push('">');
    out.push(String((values['name'] === undefined ? '' : values['name'])));
    out.push('</b> (');
    out.push(String((values['origin'] === undefined ? '' : values['origin'])));
    out.push(')</li>');
    }};
    */

};

Benchmark.prototype.teardown = function() {
    tpl.nodes.jquery.html('');
    tpl.nodes.kendo.html('');
    tpl.nodes.sencha.html('');
    tpl.nodes.kendo_noUseWithBlock.html('');
};
</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
              jQuery
              $.tmpl(tpl.jquery, tpl.data);
              pending…
              Kendo UI
              kendo.render(tpl.kendo, tpl.data);
              pending…
              Kendo UI noUseWithBlock
              kendo.render(tpl.kendo_noUseWithBlock, tpl.data);
              pending…
              Sencha
              tpl.sencha.apply(tpl.data);
              //tpl.test([],tpl.data,{},1,1);
              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:

              1 comment

              Jan (revision owner) commented :

              • Seems like sencha's push approach works really great for template strings that a shorter than 73*10^3 (Most templates are much much much much shorter I would assume.).

              • Fiddle around with the tpl.length variable in Preparation code to see the difference.

              • Setting tpl.length to 500 yields a stack overflow error in my testing of Kendo UI.

              Add a comment