CanJS EJS Live Binding Performance

JavaScript performance comparison

Revision 2 of this test case created by Curtis Cummings

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

<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>

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
CanJS
// async test
window.runCan()
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