3

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

Abhishek Bhatta
  • 71
  • 2
  • 8
  • Are those components dataobjects you get from your api? Do you really need them all rendered at startup, or would you prefer some kind of pagination? – Ninigi Jan 16 '17 at 10:08
  • Yes the component dataobjects are from the api. And I really need to list them down all and implement selecting the components and then finally sort the selected items in the list using drag and drop – Abhishek Bhatta Jan 16 '17 at 10:32
  • 1
    Hm, I think it would help to see some code, especially your route maybe? Don't get your hopes too hight though, it might just be that it is impossible to speed it up anymore than you maybe already did. – Ninigi Jan 16 '17 at 10:39
  • Do you have a scroll? – ykaragol Jan 16 '17 at 12:46

2 Answers2

0

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.

Community
  • 1
  • 1
ykaragol
  • 6,139
  • 3
  • 29
  • 56
0

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.

Johan de Bruin
  • 73
  • 8