[loz220]

Having recently worked on optimizing the performance of my own view extension library to Backbone (kettle.js), I can give some explanation about the relatively poor performance of Backbone's todoMVC implementation in benchmark#1 and #2.

Benchmark 1) This benchmark deals with adding a bunch of todos and seeing how fast they render. The major performance impact here seems to be jQuery. Specifically jQuery event delegation. I was surprised to find that binding DOM events in jQuery are incredibly slow, in fact the majority of the time in that benchmark is spent event binding. For comparison have a look at exoskeleton, a Backbone fork which removes the jQuery dependency and uses the native DOM methods instead. It's also available on todomvc.com and uses pretty much the same code as the Backbone todo implementation.

Given the following benchmark :

    var benchmark = function() {
      app.todos.reset();
      var s = [];var i=0; while (i<1000) {s.push({title:'foo'});i++};
      var t  = performance.now();
      app.todos.reset(s);
      return performance.now() - t;
    }

Backbone: (http://todomvc.com/architecture-examples/backbone/)

   >>benchmark()
   >>667.2439999965718

Exoskeleton: http://todomvc.com/labs/architecture-examples/exoskeleton/

   >>benchmark()
   >>226.4119999963441

It's worth mentioning that Backbone has a couple pull requests open that is meant to address this.

Benchmark 2) This benchmark deals with toggling all of the todos events at once. It builds up 200 todos and toggles them on and off 5 times.

The problem lies with using 'all' and 'change' events way too liberally within the todo application. Which causes a ton of needless render calls. During the course of this benchmark the main view has render called on it 6000 times (!) while the child views have render called on them for a total of 3000 times. I'm actually surprised that Backbone is as fast as it is given those type of numbers. What should happen is the main view should only need to render a total of 5 times (once for each toggle) and the child views 1000 times (200 items x 5 times).