Sencha Touch 2 template vs manual

JavaScript performance comparison

Test case created by Olivier C.


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

Preparation code

<script src="">
Benchmark.prototype.setup = function() {
    var data = [];
    for(var i = 0; i < 100; i++) {
                id: 'id-' + i,
                title: 'Best title ever',
                content: 'This is the content text',
                img: {
                        url: '',
                        width: 50,
                        height: 50
    var tpl = [
                '<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>',
    var xtpl = Ext.create('Ext.XTemplate', tpl, {compiled: true});

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);
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>';

Compare results of other browsers


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:


Comment form temporarily disabled.

Add a comment