View rendering performance - Ember v. Angular

I am not sure how that could happen but it is definitely working for me. The code looks like:

{{#group}}
   {{#each model in models groupedRows=true}}
      ...
      <div {{action stuff model}}></div>
   {{/each}}
{{/group}}

There is one controller powering this whole list and when there is an event happened, I pass model as a param.

These are a few tips I have found useful so far for large list, hope it is helpful:

  • group helper/unbound if possible
  • use bounded handlebar helper to render html directly if possible.
  • use as fewer views as possible in each table cell. (it turns out it takes some time to set up a view, so in my latest version, i removed all ā€œsubviewsā€ in a table cell, it is either raw html or handlebar helpers)
  • render only part of list at one time.
2 Likes

Thank you, will keep these in mind.

do let me know if it helps. :smile:

Just to add a datapoint: In a list of ~500 items with each linkView having 6 bound properties on 2012 15" rMBP and Chrome 31, moving to #group helper reduced rendering time by a full second from 2.4s to 1.4s on average.

I think Rob Harperā€™s advice here Mobile Ember - Performance is sound especially if you have large lists but some of those recommendations are not super easy to implement and things like #group are still experimental. I wish it were easier.

Iā€™m working on improving the rendering performance with the HTMLBars integration work. We should be able to do significantly better after that :slight_smile:

6 Likes

Great. Iā€™m looking forward to hearing about it at Emberconf.

1 Like

I did not get time to go to the meetup yesterday. Do we have the HTMLbars slide posted anywhere? Thanks!

There was a meetup yesterday? There was a tentative one tonight but I believe thatā€™s cancelled.

Slides are up here: http://bit.ly/1kZxv2u

2 Likes

Super excited! Is there any implication on memory?

I donā€™t have anything specific to report re: memory, but itā€™s definitely on our minds. We expect HTMLBars to actually reduce the amount of memory being used in the JS heap.