Ember is very slow at rendering lists

Performance
15

@mixonic those are some interesting techniques for if someone hits a performance wall with ember and wants to push further. The first one especially is good because it keeps the bindings working. Here’s an improvement - http://jsbin.com/enapec/48/edit . By setting tagName to ‘span’ it renders like it should and outputs fewer elements.

The second example is less interesting in my opinion because it’s getting close to doing it all manually and you might as well use jquery on didInsertElement.

I don’t really need help fixing my specific problem because I know I can drop down to a lower level (or render fewer elements) if need be. My thinking is along the lines of @sjmueller’s that it’s a bad thing that ember’s idiomatic approach is not so performant and that’s what I’d like to see improved.

Something that would be useful here would be a good way to do profiling. I couldn’t think of a good way in my original post of comparing ember and angular, but while experimenting I thought of this:

var lastTime = new Date();
var timer = function() {
  var elapsed = (new Date()-lastTime);
  if (elapsed > 100) console.log(elapsed/1000.0+"s");
  lastTime = new Date();
  setTimeout(timer, 0);
};
timer();

Using that we can get some actual figures:

  • Plain angular:
    • add: 0.504s
    • remove: 0.134s
  • Plain ember:
    • add: 1.408s + 0.2s
    • remove: 1.449s
  • mixonic’s SpanView approach:
    • add: 1.002s
    • remove: 1.201s
  • ember with #group block helper:
    • add: 0.200s
    • remove: too fast!

So, the SpanView approach approach is noticeably faster. More interesting is the #group block helper version. It uses the helper from https://github.com/emberjs/group-helper you can see it running at http://jsbin.com/enapec/49/edit . It redraws the entire list if any of the underlying data changes, but would be very fast for mostly static lists.

1 Like