Rendering 2000+ element optimization suggestions?


#1

I have to render in my page about more than 2000 elements mostly of type “inputs”

The first time I did it, PC fans starts producing load sounds and it took about 30 to 90 seconds to render.

Any advices???

(Currently I hide the elements and I made them appear whenever the user request it)

Edit: I also need to bind them.


#2

Try Ember 2.7 Canary with Glimmer 2 turned on.


#3

I don’t want to switch to non lts version if possible. Do you have another solution?


#4

Push an example to github, maybe someone can hack on it or give you pointers of what you may be doing that are causing perf hits.


#5

you should rethink you solution… no screen can display 2000 elements. If possible you should think about lazy load your inputs and hide if not in visible area. for reference implemention you can have a look here: https://github.com/emberjs/ember-collection


#6

I have to echo @schwaiger, I can’t see why you would need/want to display 2000 inputs, it just doesn’t make for a good experience for your end-users. I’d have a rethink about that first then look into optimising what you have left :slight_smile:


#7

@ricky1981 @schwaiger I have a calendar of a week that has a input for everyday. I will give you an exmaple. I have about 15 machines or maybe more Every machine is displayed as an item and it has a calendar of 7 days and 24 hours (Math: 7 x 24 = 168 x 15 = 2,520). The user choose on which hours and day should the machine work. He can check on sunday from 8 am to 12 pm and from 6 pm to 10 pm and so on. The user should see all the machines’ calendar in front of him to compare them. Ember takes just too much time (About one minute or more) to render the page.


#8

@jasonmit Will try to push it on github


#9

I also think you should consider some lazy-loading/rendering option. If you need something like this, take a look at https://github.com/runspired/smoke-and-mirrors


#10

Hi, I have not found any documentation how to turn on Glimmer 2 engine. Do you know steps how to enable it?


#11