hey,
I’m currently working on a project, where a bunch of container views (probably up to 8 or 10 views) render lots of child views (~20 - 30 per container view) which are all using the same Handlebars template. The template is already precompiled and makes use of a few custom helpers.
at first, I wasn’t using the Handlebars templates for the child views and just creating the whole HTML markup structure with Em.$() jQuery wrapped in a function which is called .on('didInsertElement). however I thought that it would increase the rendering time/performance if I use a Handlebars template instead of rendering jQuery to the container view, but I was surprised to see the opposite! The performance when using the template was significantly slower then using jQuery. I tried to rip out my custom Handlebars helpers and do the rendering even without them, but again it was slower than the raw jQuery solution. did anybody else ran into the same issues? are there any hints, tips or even tricks I’m not aware of?
In general, you want to reduce the number of views and bindings as much as you can. Check out this thread for some tips. Also, HTMLBars is back under active development. Once it’s merged, it should increase performance across the board.
It’s not surprising that raw jQuery is faster, because it’s doing a lot less – you get no data binding.
There are several things you can do to balance performance with ease of development. First, try group helper. This can cut down the number of individual views and bindings dramatically while still retaining automatic re-rendering.
Second, you could try switching to raw handlebars for your most performance critical views. This lets you still write in the same templating language while getting significantly faster rendering – at the cost of managing rerendering manually. I find the need to do this has decreased as Ember has continued to get faster.
