Switching DOM nodes performance

I have made an ecommerce listing using css grid. I want to switch between gallery and list view but the performance is terrible. The browser locks up for 1 sec.

I thought it would be to just toggle that component section: {{#if this.galleryView}} <GalleryView @model=model /> {{else}} <ListingView @model=model /> {{/if}}

I tried addons such as ember-collection but this requires fixed sized listings where I wanted to use responsive grid.

Any ideas?

How many items are being rendered in each view? Could just be render time. Ember Inspector has a render performance tab that’s pretty helpful in debugging what’s taking a lot of render time.

If you find that it is render time related there are a variety optimizations you can use to improve performance. A few off the top of my head…

  1. use the key arg with the {{#each}} helper anywhere you’re using it to render long lists
  2. If you’re using Ember Octane the more you can use template only components for your most-rendered bits the better (they render faster)
  3. I’m assuming this only applies to “classic” bound values and maybe autotracking is more efficient (but I’m not sure), but you can use the unbound helper for any values that don’t need to auto-update (that you know won’t change after render)
  4. Look into an occlusion rendering addon like vertical-collection (not sure about Octane compatibility)
  5. And obviously just rendering less at one time via pagination/infinite scroll/etc
  6. The most extreme: using as much raw DOM matter as possible instead of components. It can wreck your code organization and isolation depending on context, but sometimes it’s faster.

EDIT: i’m not aware of any major performance issues with grid such as table reflows but I also don’t know that much about it under the hood, this just sounds like it could be more of a component render time issue to me.

1 Like

@Joshua_Jenkins I’m not sure about the performance issue, but saw your template code and want of a responsive grid. I was wondering if you’d like to try out my addon ember-container-query to solve some possible layout problems.

Cheers,