Sencha Touch 2 template vs manual (FIXED)

JavaScript performance comparison

Revision 8 of this test case created

Info

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

FIXED NOTE:

In all previous versions the XTemplate generated an empty string, "". This is updated to actually generate the intended template.

The XTemplate is compiled during setup by calling xtpl.apply(data) once.

Preparation code

<script src="//extjs.cachefly.net/touch/sencha-touch-2.2.1/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 = new Ext.XTemplate(tpl);
    // compilped on first call to apply(), will not recompile later
    xtpl.apply(data);
};
</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