canJS Live Binding Perf

JavaScript performance comparison

Revision 33 of this test case created by Stan Carrico

Preparation code

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.2.1/lodash.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.13.0/yui-base/yui-base-min.js&3.13.0/oop/oop-min.js&3.13.0/attribute-core/attribute-core-min.js&3.13.0/event-custom-base/event-custom-base-min.js&3.13.0/event-custom-complex/event-custom-complex-min.js&3.13.0/attribute-observable/attribute-observable-min.js&3.13.0/attribute-extras/attribute-extras-min.js&3.13.0/attribute-base/attribute-base-min.js&3.13.0/base-core/base-core-min.js&3.13.0/base-observable/base-observable-min.js&3.13.0/base-base/base-base-min.js&3.13.0/pluginhost-base/pluginhost-base-min.js&3.13.0/pluginhost-config/pluginhost-config-min.js&3.13.0/base-pluginhost/base-pluginhost-min.js&3.13.0/base-build/base-build-min.js&3.13.0/escape/escape-min.js&3.13.0/json-parse/json-parse-min.js&3.13.0/model/model-min.js&3.13.0/features/features-min.js&3.13.0/dom-core/dom-core-min.js&3.13.0/dom-base/dom-base-min.js&3.13.0/selector-native/selector-native-min.js&3.13.0/selector/selector-min.js&3.13.0/node-core/node-core-min.js&3.13.0/color-base/color-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.13.0/dom-style/dom-style-min.js&3.13.0/node-base/node-base-min.js&3.13.0/event-base/event-base-min.js&3.13.0/event-delegate/event-delegate-min.js&3.13.0/node-event-delegate/node-event-delegate-min.js&3.13.0/view/view-min.js&3.13.0/handlebars-base/handlebars-base-min.js&3.13.0/handlebars-compiler/handlebars-compiler-min.js"></script>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.com/release/latest/can.ejs.js"></script>

<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>


<style>
p {
  font: 12px/16px Arial;
  margin: 10px 10px 15px;    
}

button {
  font: bold 14px/14px Arial;  
  margin-left: 10px;
}

#grid {
  margin: 10px;  
}

.box-view {
  width: 20px; height: 20px;
  float: left;
  position: relative;
  margin: 8px;    
}

.box {
  border-radius: 100px;
  width: 20px; height: 10px;
  padding: 5px 0;
  color: #fff;
  font: 10px/10px Arial;
  text-align: center;
  position: absolute;
}  

</style>
<script id="can-template-ejs" type="text/ejs">
  <% _.each(boxes, function(box,i) { %>
    <div class="box-view">
      <div class="box box-<%= i  %>" style="<%= box.style() %>">
        <%= box.content() %>
      </div>
    </div>
  <% }) %>
</script>
<script id="can-template-mustache" type="text/mustache">
  {{#boxes}}
    <div class="box-view">
      <div class="box box-{{@index}}" style="{{style el}}">
        {{content}}
      </div>
    </div>
  {{/boxes}}
</script>
<script type="x-template" id="underscore-template">
  <div class="box box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
    <%= content %>
  </div>
</script>

<script type="text/x-handlebars" id="handlebars-template" data-template-name="box">
  <div class="box" {{bindAttr class="model.number" style="model.style"}}>
    {{ model.content }}
  </div>
</script>

<script type="text/x-template" id="knockout-template">
  <div data-bind="foreach: boxes">
    <div class="box-view">
      <div class="box" data-bind="style: {top: top(), left: left(), background: color()}, text: content()"></div>
    </div>
  </div>
</script>
<script type="text/x-yui-handlebars" id="yui-handlebars-template">
    <div class="box box-{{number}}" style="top: {{top}}px; left: {{left}}px; background: rgb(0,0,{{color}});">
        {{content}}
    </div>
</script>
<div id="can-grid-ejs"></div>
<div id="can-grid-mustache"></div>
<div id="bb-grid"></div>
<div id="ko-grid"></div>
<div id="yui-grid"></div>
<script>
    window.N = 100;
   
    (function(){
      var Box = function() {
          return {
            count: 0,
            top: function() {
              return (Math.sin(this.attr('count') / 10) * 10) + 'px';
            },
            left: function() {
              return (Math.cos(this.attr('count') / 10) * 10) + 'px';
            },
            color: function() {
              return 'rgb(0,0,' + (this.attr('count')) % 255 + ')';
            },
            content: function() {
              return this.attr('count') % 100;
            },
            tick: function() {
              this.attr('count', (this.attr('count') + 1));
            },
            style: function() {
              return 'top: ' + this.top() + '; left: ' + this.left() + '; background: ' + this.color() + ';';
            }
          };
        };

                var Box2 = function() {
                  return {
                    count: 0,
                    tick: function() {
                      this.attr('count', (this.attr('count') + 1));
                    },
                    top: function() {
                      return (Math.sin(this.attr('count') / 10) * 10) + 'px';
                    },
                                left: function() {
                      return (Math.cos(this.attr('count') / 10) * 10) + 'px';
                    },
                    color: function() {
                      return 'rgb(0,0,' + (this.attr('count')) % 255 + ')';
                    }
                  };
                };

        window.CanTestEjs = function() {
                  var tpl;
          this.boxes = new can.List();
          for (var i = 0; i < N; i++) {
            this.boxes.push(new Box());
          }
                  tpl = can.view("can-template-ejs", {
            boxes: this.boxes
                });
          jQuery('#can-grid-ejs').html(tpl);
        };
        window.CanTestEjs.prototype.run = function() {
            can.Observe.startBatch();
                        _.each(this.boxes,function(box){
                                box.tick();
                        });
            can.Observe.stopBatch();
        };

                window.CanTestMustache = function() {
                  var tpl,box;
          this.boxes = new can.List();
          for (var i = 0; i < N; i++) {
            this.boxes.push(new Box2());
          }
                  tpl = can.view("can-template-mustache", {
            boxes: this.boxes
                },{
                                style: function() {
                      return 'top: ' + this.top() + '; left: ' + this.left() + '; background: ' + this.color() + ';';
                    },
                    content: function() {
                      return String(this.attr('count') % 100);
                    }
                        });
          jQuery('#can-grid-mustache').html(tpl);
        };
        window.CanTestMustache.prototype.run = function() {
            can.Observe.startBatch();
                        _.each(this.boxes,function(box){
                                box.tick();
                        });
            can.Observe.stopBatch();
        };
    })();
   
    (function() {
   
      var Box = Backbone.Model.extend({
   
        defaults: {
          top: 0,
          left: 0,
          color: 0,
          content: 0
        },
   
        initialize: function() {
          this.count = 0;
        },
   
        tick: function() {
          var count = this.count += 1;
          this.set({
            top: Math.sin(count / 10) * 10,
            left: Math.cos(count / 10) * 10,
            color: (count) % 255,
            content: count % 100
          });
        }
   
      });
   
   
      var BoxView = Backbone.View.extend({
   
        className: 'box-view',
   
        template: _.template(jQuery('#underscore-template').html()),
   
        initialize: function() {
          this.model.bind('change', this.render, this);
        },
   
        render: function() {
          this.$el.html(this.template(this.model.attributes));
          return this;
        }
   
      });
   
      var boxes;
   
      window.backboneInit = function() {
          boxes = _.map(_.range(N), function(i) {
            var box = new Box({
              number: i
            });
            var view = new BoxView({
              model: box
            });
            $('#bb-grid').append(view.render().el);
            return box;
          });
          };
   
      var backboneAnimate = function() {
            for (var i = 0, l = boxes.length; i < l; i++) {
              boxes[i].tick();
            }
          };
   
      window.runBackbone = function() {
        backboneAnimate();
      };
    })();
   
    (function() {
   
      var Box = function() {
          this.count = ko.observable(0);
          this.top = function() {
            return (Math.sin(this.count() / 10) * 10) + 'px';
          };
          this.left = function() {
            return (Math.cos(this.count() / 10) * 10) + 'px';
          };
          this.color = function() {
            return 'rgb(0,0,' + (this.count()) % 255 + ')';
          };
          this.content = function() {
            return this.count() % 100;
          };
   
   
          this.tick = function() {
            this.count(this.count() + 1);
          }
          }
         
         
         
         
         
      var ViewModel = function(num) {
          this.num = num;
          this.boxes = ko.observableArray();
          for (var i = 0; i < num; i++) {
            this.boxes.push(new Box())
          }
          }

      var knockoutAnimate = function() {
            for (var i = 0, l = vm.boxes().length; i < l; i++) {
              vm.boxes()[i].tick();
            }
      }
         
         
          window.knockoutInit = function(){
            $('#ko-grid').html($('#knockout-template').html());
            vm = new ViewModel(N)
            ko.applyBindings(vm, $('#ko-grid')[0]);
          };
         
         
      window.runKnockout = function() {
        knockoutAnimate();
      };
   
    })();
   
YUI().use('base','model', 'view', 'handlebars', function (Y) {

Y.Box = Y.Base.create('box', Y.Model, [], {
    initializer: function () {
        this.count = 0;
    },
   
    tick: function () {
        var count = this.count += 1;
       
        this.setAttrs({
            top    : Math.sin(count / 10) * 10,
            left   : Math.cos(count / 10) * 10,
            color  : (count) % 255,
            content: count % 100
        });
    }        
}, {
    ATTRS: {
        top    : {value: 0},
        left   : {value: 0},
        color  : {value: 0},
        content: {value: 0},
        number : {}
    }
});
   
Y.BoxView = Y.Base.create('boxView', Y.View, [], {
    template: Y.Handlebars.compile(Y.one('#yui-handlebars-template').getContent()),
   
    initializer: function () {
        this.get('model').after('change', this.render, this);
    },
   
    create: function () {
        return Y.Node.create('<div class="box-view" />');
    },
   
    render: function () {
        var content = this.template(this.get('model').toJSON());
        this.get('container').setContent(content);
        return this;
    }
});

var boxes;

var yuiAnimate = function() {
    for (var i = 0, l = boxes.length; i < l; i++) {
      boxes[i].tick();  
    }
};

window.yuiInit = function () {
    boxes = _.map(_.range(N), function (i) {
        var box  = new Y.Box({number: i});
        var view = new Y.BoxView({model: box});
               
        Y.one('#yui-grid').append(view.render().get('container'));
        return box;
    });
};

window.runYUI = function() {
  yuiAnimate();    
};
   
});

window.canEjsTest = new window.CanTestEjs();
window.canMustacheTest = new window.CanTestMustache();
window.backboneInit();
window.knockoutInit();
window.yuiInit();

    </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
CanJS - can.EJS
window.canEjsTest.run();
pending…
Backbone
window.runBackbone();
pending…
Knockout
window.runKnockout();
pending…
YUI
window.runYUI();
pending…
CanJS - can.Mustache
window.canMustacheTest.run();
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