Sencha Touch 2 template vs manual

JavaScript performance comparison

Revision 11 of this test case created

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
        }
      });
    }
    // For Sencha
    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
    });
   
    // For Manual
    var tpl = function(data) {
      return '<li id="' + data.id + '"><h1 class="title">' + data.title + '</h1><div class="image" style="background-image: url(' + data.img.url + '); background-size: ' + data.img.height + 'px ' + data.img.width + 'px;"></div><div class="text">' + data.content + '</div></li>';
    };
};
</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, c = data.length; i < c; i++) {
  res += tpl(data[i]);
}
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