Templating: Kendo vs jQuery vs Sencha

JavaScript performance comparison

Revision 4 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>

<script type="text/x-kendo-template" id="kendo_ext">
<div>
    <li><b style="color:${color}">${name}</b> (${origin})</li>
</div>
</script>
<script type="text/x-kendo-template" id="kendo_noUseWithBlock_ext">
<div>
    <li><b style="color:${data.color}">${data.name}</b> (${data.origin})</li>
</div>
</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.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.kendo_ext = kendo.template($("#kendo_ext").html());
    tpl.kendo_noUseWithBlock_ext = kendo.template($("#kendo_noUseWithBlock_ext").html(), {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});
};

Benchmark.prototype.teardown = function() {
    $('#result_jquery').html('');
    $('#result_kendo').html('');
    $('#result_sencha').html('');
    $('#result_kendo_noUseWithBlock').html('');
    $('#result_kendo_ext').html('');
    $('#result_kendo_noUseWithBlock_ext').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
              $('#result_jquery').append($.tmpl(tpl.jquery, tpl.data));
              pending…
              Kendo UI
              $('#result_kendo').append(kendo.render(tpl.kendo, tpl.data));
              pending…
              Sencha
              tpl.sencha.append(Ext.get("result_sencha"), tpl.data);
              pending…
              Kendo UI noUseWithBlock
              $('#result_kendo_noUseWithBlock').append(kendo.render(tpl.kendo_noUseWithBlock, tpl.data));
              pending…
              Kendo UI ext
              $('#result_kendo_ext').append(kendo.render(tpl.kendo_ext, tpl.data));
              pending…
              Kendo UI noUseWithBlock ext
              $('#result_kendo_noUseWithBlock_ext').append(kendo.render(tpl.kendo_noUseWithBlock_ext, 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:

              0 comments

              Add a comment