Sencha Touch 2 template vs manual

JavaScript performance comparison

Test case created by Olivier C.

Info

Testing the template apply vs manual loop. Both return the text string containing data to be inserted.

Preparation code

<script src="//extjs.cachefly.net/touch/sencha-touch-2.1.0/sencha-touch-all.js">
</script>
<script>
Benchmark.prototype.setup = function() {
    var data = [];
    for(var i = 0; i < 100; i++) {
        data.push({
                id: 'id-' + i,
                title: 'Best title ever',
                content: 'This is the content text',
                img: {
                        url: 'http://www.img.com/img.png',
                        width: 50,
                        height: 50
                }
        });
    }
   
    var tpl = [
        '<ul>',
                '<tpl for=".">',
                        '<li id="{id}">',
                                '<h1 class="title">{title}</h1>',
                                '<div class="image" style="background-image: url({img.url}); background-size: {img.height}px {img.width}px;"></div>',
                                '<div class="text">{content}</div>',
                        '</li>',
                '</tpl>',
        '</ul>'
    ];
   
    var xtpl = Ext.create('Ext.XTemplate', tpl, {compiled: true});
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Sencha Touch 2
var res = xtpl.apply(data);
pending…
Manual
var res = '<ul>';
for (var i = 0; i < data.length; i++) {
  res += '<li id="' + data[i].id + '"><h1 class="title">' + data[i].title + '</h1><div class="image" style="background-image: url(' + data[i].img.url + '); background-size: ' + data[i].img.height + 'px ' + data[i].img.width + 'px;"></div><div class="text">' + data[i].content + '</div></li>';
}
res += '</ul>';
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