CanJS EJS Live Binding Performance

JavaScript performance comparison

Revision 2 of this test case created by Curtis Cummings

Info

Comparison between CanJS, Backbone, Ember, YUI and Ember.

Test renders 100 circles and updates the content and style of each.

Based on demo here: http://jsfiddle.net/JMWf4/4/

Preparation code

<script src="http://donejs.com/examples/todo/zepto/zepto.0.8-focusblur.js">
</script>
<script src="http://donejs.com/can/dist/edge/can.zepto.js">
</script>
<script type="text/ejs" id="ejs-template">
  <% list(boxes, function( box ) { %>
    <div class="box-view">
      <div class="box" id="box-<%= box.count  %>" style="<%= box.style() %>">
        <%= box.content() %>
      </div>
    </div>
  <% }) %>
<div id="grid"></div>
<script>
Benchmark.prototype.setup = function() {
    window.N = 100;
    window.reset = function() {
        $('#grid').empty();
        clearTimeout(timeout);    
    };
    (function() {
      var can = {
                Box = function() {
                    return {
                      count: 0,
                      top: function() {
                        return (Math.sin(this.count / 10) * 10) + 'px'
                      },
                      left: function() {
                        return (Math.cos(this.count / 10) * 10) + 'px'
                      },
                      color: function() {
                        return 'rgb(0,0,' + (this.count) % 255 + ')'
                      },
                      content: function() {
                        return this.attr('count') % 100
                      },
                      tick: function() {
                        this.attr('count', (this.attr('count') + 1));
                      },
                      style: function() {
                        this.attr('count');
                        return 'top: ' + this.top() + '; left: ' + this.left() + '; background: ' + this.color() + ';';
                      }
                    }
                  },
                        canInit = function() {
                                boxes = new can.Observe.List();
                                for (var i = 0; i < N; i++) {
                                        boxes.push(new Box());
                                }
                                $('#grid').append(can.view('ejs-template', {
                                        boxes: boxes
                                }));
                        },
                        canAnimate = function() {
                                for (var i = 0; i < N; i++) {
                                        boxes[i].tick();
                                }
                                deferred.resolve();
                        }
                };
    })();
};

Benchmark.prototype.teardown = function() {
    window.reset()
};
</script>

Preparation code output