What is the biggest performance issue in Emberjs?

Question

Last 6 months I'm developing an Emberjs components.

I started had first performance problems when I tried develop a table component. Each cell in this table was Ember.View and each cell had a binding to object property. When the table had 6 columns and I tried to list about 100 items, it caused that browser was frozen for a while. So I discovered, that it is better write a function which return a string instead of using handlebars and handle bindings manually by observers.

So, is there any good practice how to use minimum of bindings? Or how to write bindings and not lose a lot of performance. For example... not use bindning for a big amount of data?

How many Ember.View objects is possible append to page?

Thanks for response

Answer 1

We've got an ember application that displays 100s of complex items on a single page. Each item uses out-of-box handlebars bindings to output about a dozen properties. It renders very quickly (< 100ms) and very little of that time is spent on bindings.

If you find the browser is hanging at 6 columns and 100 items there is for sure something else is wrong.

So, is there any good practice how to use minimum of bindings? Or how to write bindings and not lose a lot of performance.

Try setting Ember.LOG_BINDINGS = true to see what is going on. Could be the properties you are binding to have circular dependencies or costly to resolve. See this post for great tips on debugging:

http://www.akshay.cc/blog/2013-02-22-debugging-ember-js-and-ember-data.html

How many Ember.View objects is possible append to page?

I don't believe there is a concrete limit, for sure it will depend on browser. I wouldn't consider optimizing unless there were more than a few thousand.

Check out this example to see how ember can be optimized to handle very large tables:

http://addepar.github.com/ember-table/

Answer 2

Erik Bryn recently gave a talk about Ember.ListView which would drastically cut down the number of views on a page by reusing list cells which have gone out of the viewport.

Couple this technique with group-helper to reduce the number of metamorph script tags if your models multiple properties at the same time. Additionally, consider using {{unbound}} if you don't need any of the properties to live update.