WinJS Compiled Templates

JavaScript performance comparison

Revision 4 of this test case created by R

Info

Comparison between compiled WinJS.Binding.Template and interpreted. The compiled path generates a JS function at run-time with a stringified version of the template's initial binding pass.

Additionally, the template has an optimized path which is the .renderItem method, designed to play well with our WinJS.UI.ListView control whereby the ListView can support multi-stage rendering, in this case the Template will put all the binding setup work for firing change notifications and such into the slow stage so the first pass is even faster.

If you are interested in seeing the generated code, remove the leading "x-" from the x-data-win-options attribute on the compiled template <div>.

YMMV, the delta depends on the complexity of the template and its contents.

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

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
compiled
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…
compiled - 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…
interpreted
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…
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. Here’s a list of current revisions for this page:

0 comments

Add a comment