WinJS Compiled Templates

JavaScript performance comparison

Test case created by Josh

Preparation code

<script src="http://try.buildwinjs.com/lib/winjs/js/base.min.js?v1.0.89"></script>

<div id="compiled" data-win-control="WinJS.Binding.Template" x-data-win-options="{debugBreakOnRender: true}">
    <div data-win-bind="textContent: name"></div>
    <div data-win-bind="textContent: age"></div>
    <div data-win-bind="textContent: address.street"></div>
    <div data-win-bind="textContent: address.city"></div>
    <div data-win-bind="textContent: address.state"></div>
    <div data-win-bind="textContent: address.zip"></div>
</div>

<div id="interpreted" data-win-control="WinJS.Binding.Template" data-win-options="{disableOptimizedProcessing:true}">
    <div data-win-bind="textContent: name"></div>
    <div data-win-bind="textContent: age"></div>
    <div data-win-bind="textContent: address.street"></div>
    <div data-win-bind="textContent: address.city"></div>
    <div data-win-bind="textContent: address.state"></div>
    <div data-win-bind="textContent: address.zip"></div>
</div>

<div id="host"></div>

<script>WinJS.UI.processAll();</script>
      
<script>
Benchmark.prototype.setup = function() {
  document.getElementById("host").innerHTML = "";
  
  var N = 100;
  var data = [];
  for (var i = 0; i < N; i++) {
    data.push({
      name: "My Name " + i,
      age: i,
      address: {
        street: "2350 10th Ave E.",
        city: "Seattle ",
        state: "WA ",
        zip: 98102
      }
    });
  }
  
  // Used by the .renderItem path, this is the promise on which the 
  // expensive work like setting up bindings is predicated on, in
  // this example to show the fast path that occurs when (for example
  // panning quickly), we never complete the promise and instead 
  // cancel it in teardown.
  //
  var ready = new WinJS.Promise(function() {});

};

Benchmark.prototype.teardown = function() {
  ready.cancel();
  document.getElementById("host").innerHTML = "";
  

};
</script>

Preparation code output

<div id="compiled" data-win-control="WinJS.Binding.Template" x-data-win-options="{debugBreakOnRender: true}"> <div data-win-bind="textContent: name"></div> <div data-win-bind="textContent: age"></div> <div data-win-bind="textContent: address.street"></div> <div data-win-bind="textContent: address.city"></div> <div data-win-bind="textContent: address.state"></div> <div data-win-bind="textContent: address.zip"></div> </div> <div id="interpreted" data-win-control="WinJS.Binding.Template" data-win-options="{disableOptimizedProcessing:true}"> <div data-win-bind="textContent: name"></div> <div data-win-bind="textContent: age"></div> <div data-win-bind="textContent: address.street"></div> <div data-win-bind="textContent: address.city"></div> <div data-win-bind="textContent: address.state"></div> <div data-win-bind="textContent: address.zip"></div> </div> <div id="host"></div> <script>WinJS.UI.processAll();</script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
compiled
var compiled = document.getElementById("compiled").winControl;

for (var i = 0, len = data.length; i < len; i++) {
  compiled.render(data[i]).then(function(result) {
    host.appendChild(result);
  });
}
pending…
compiled - renderItem
var compiled = document.getElementById("compiled").winControl;

for (var i = 0, len = data.length; i < len; i++) {
  var itemPromise = WinJS.Promise.as({
    ready: ready,
    data: data[i]
  });
  compiled.renderItem(itemPromise).element.then(function(result) {
    host.appendChild(result);
  });
}
pending…
interpreted
var interpreted = document.getElementById("interpreted").winControl;

for (var i = 0, len = data.length; i < len; i++) {
  interpreted.render(data[i]).then(function(result) {
    host.appendChild(result);
  });
}
pending…
interpreted - renderItem
var interpreted = document.getElementById("interpreted").winControl;

for (var i = 0, len = data.length; i < len; i++) {
  var itemPromise = WinJS.Promise.as({
    ready: ready,
    data: data[i]
  });
  interpreted.renderItem(itemPromise).element.then(function(result) {
    host.appendChild(result);
  });
}
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.

0 Comments