Sencha Touch 2 template vs manual

JavaScript performance comparison

Revision 10 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
        }
      });
    }
};
</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 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
});
var res = xtpl.apply(data);
pending…
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>';
};
var res = '<ul>';
for (var i = 0, c = data.length; i < c; i++) {
  res +=
}
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