What ember version?
Benchmarking in browsers is quite slippery, especially given the somewhat random-feeling impact of the JIT. But for comparison, I just timed rendering of 5000 divs on a production build of 3.12 canary on desktop chrome and got 75ms. If you’re seeing numbers 20 times worse under similar conditions, something weird is going on that needs to get debugged more carefully.
If your component count (as opposed to Element count) is high, it’s also worth making sure you’re using glimmer components and not classic components. In a quick comparison, I’m measuring them as 3x to 5x faster.
- for template-only components, make sure you have the
template-only-glimmer-componentsoptional feature turned on. This is the default for new apps, but longer-lived apps will need to enable it. The only thing this requires you to do is to explicitly add the wrapping<div>to your template-only components, whereas before that div got added magically by ember. (Not having the magic wrapping div is extremely nice by itself, even if there wasn’t a performance boost to glimmer components.) - for JS-backed components, you extend from
@glimmer/componentinstead of@ember/component. The best source of documentation for this is the Octane Guides. The octane guides are still in preview but most of the features they document are already available in stable ember releases.