Baseline performance of rendering components is "slow"


#1

This is a topic that might have been discussed to death, and I might think that my case is slightly different, when in fact it isn’t. If so, feel free to close this thread with an RTFM or whatever you wish.

Basically the issue I’ve run into is that it takes around 0.3-1.5 ms to render a component. In this case just a component with static HTML and no properties, attributes or actions. That might not seem much. The problematic case is iterating a large list and rendering components within that. This list might have thousands of objects, and even at 1000 it might take ~1000 ms (1 second) to render the list. I’m trying this on a macbook pro latest generation, so it’s not mobile issue or anything, using Chrome.

Check out the git repo I made to demonstrate: (Note: I tried both in development and after ember build)

Am I doing something wrong by rendering components within a list iteration? Is 0.3-1.5ms acceptable? Is this something that’s actively being worked on? Is my method for measuring wrong? What’s the general thought about this?


#2

Glimmer 2.0, which is in active development now, will deal with initial render performance. Whereas, Glimmer 1.0 (landed in Ember 1.13) mainly delt with re-render performance, but inadvertently slowed initial render performance. Not sure when Glimmer 2.0 will land, sounds like possibly in the next couple 2.x.0 releases, so 6-12ish weeks until beta (or more).

I can’t speak to optimizations for large lists, I haven’t had to deal with that just yet, so I’ll let others speak up on that topic. My only feedback would be to specify a key in the {{each}} helper.


#3

ember build and ember serve produce identical results. Make sure to test in production mode with ember build -prod or ember serve -prod. It should be faster, but what @Panman8201 said still holds true.