How to optimize the rendering of components in Ember JS

Question

There are around 3 hundred components rendered inside the wrapper component and its taking to much of time to render. But I need thousand of components to get rendered inside the wrapper container. How can I achieve this without any performance issues while rendering the components Image shows the rendering time taken by 300 components which is too much

Answer 1

If you have a scroll and all of your components are not in the viewport at the same time, you may use the Proxy Pattern.

There is an ember addon called ember-in-viewport to detect whether your component is in viewport or not. By using it, you may implement the proxy pattern.

Here is a sample twiddle. At the application.hbs, if you use my-proxy-component instead of my-component, page rendering would be nearly 3 times faster.

Answer 2

These tips are kinda hacky but might help:

You might want to lazy load some of the components, like for example load the most critical ones and then load the rest changing a computed property after a fixed timeout on didRender event (during the idle state).

For example:

onDidRender: Ember.on('didRender', function() {
    Ember.run.later(() => {
        this.set('displayLazyItems', true);
    }, 2000);
})

Another thing you might want to do is inline code instead of creating a new component for small items. Rendering those might take some serious time.

Record a timeline and ensure that the performance is actually coming from render time, sometimes is actually some javascript execution or loading that is messing up.

Lastly, ember 2.10 includes glimmer 2, this new render engine can optimize render time up to 50%, you might want to consider using it.