Templating: Kendo vs jQuery vs Sencha

JavaScript performance comparison

Revision 9 of this test case created by Erik

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>

<div style="width:20%;overflow:hidden;float:left;">
<ul id="result_jquery"></ul>
</div>
<div style="width:20%;overflow:hidden;float:left;">
<ul id="result_kendo"></ul>
</div>
<div style="width:20%;overflow:hidden;float:left;">
<ul id="result_sencha"></ul>
</div>
<div style="width:20%;overflow:hidden;float:left;">
<ul id="result_kendo_nuwb"></ul>
</div>
<div style="width:20%;overflow:hidden;float:left;">
<ul id="result_sencha_overwrite"></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.kendo = kendo.template('<li><b style="color:${color}">${name}</b> (${origin})</li>');
   
    tpl.kendo_noUseWithBlock = kendo.template('<li><b style="color:${data.color}">${data.name}</b> (${data.origin})</li>', {useWithBlock: false});
   
    tpl.jquery = $.template('<li><b style="color:${color}">${name}</b> (${origin})</li>');
   
    tpl.sencha = Ext.create('Ext.XTemplate','<tpl for="."><li><b style="color:{color}">{name}</b> ({origin})</li></tpl>', {compiled: true});
   
    tpl.result = {};
    tpl.result.jquery = $('#result_jquery');
    tpl.result.sencha = $('#result_sencha');
    tpl.result.kendo = $('#result_kendo');
    tpl.result.kendo_nuwb = $('#result_kendo_nuwb');
    tpl.result.sencha_overwrite = $('#result_sencha_overwrite')[0];
};
</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
            tpl.result.jquery.html($.tmpl(tpl.jquery, tpl.data));
            pending…
            Kendo UI
            tpl.result.kendo.html(kendo.render(tpl.kendo, tpl.data));
            pending…
            Sencha
            tpl.result.sencha.html(tpl.sencha.apply(tpl.data));
             
            pending…
            Kendo UI noUseWithBlock
            tpl.result.kendo_nuwb.html(kendo.render(tpl.kendo_noUseWithBlock, tpl.data));
            pending…
            Sencha Ext.overwrite
            tpl.sencha.overwrite(tpl.result.sencha_overwrite, tpl.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:

            1 comment

            Erik (revision owner) commented :

            Bottle neck is defintely the html() method which writes the template code into a (pre)-selected DOM-Element

            Add a comment