List re-rendered when switching tabs with bad performance

ionic-v1
1

Using ui-router with tabs and list will re-render when switching tab, Lists has pretty bad rendering performance.

I’m getting a rendering time about 500ms on my desktop for a simple list with 300 items, and it will discard that view and re-rendering upon leaving / entering the tab.

I’ve made an example here that will put out ng-repeat rendering time in console.
http://embed.plnkr.co/hu5cshsxMLqg44vegBxT/preview

Afaik angular-ui router doesn’t support caching of a view or some sort.
I’ve tried bindonce directive for ng-repeat but it has a minimal impact.
Not using “list” or “item” directive and just the plain html markup with list and item classes will improve performance about 30-40% but it is still way to slow, especially on a mobile browser.

Any suggestion on how to approach / fix this problem?

1 Like
2

None right now.

Post 1.0, though, we do plan to add ‘virtual lists’, which will render only {numberOfItemsVisibleOnScreen} at once out of a huge list.

Also, ‘caching’ elements is planned. When you leave a view, it saves the DOM of that view in memory then just ‘re-links’ it when you go back. That will save a lot DOM compilation time.

8 Likes
3

DOM caching would help a lot. Especially if one uses lists of cards which have a lot of elements per list item. So… +1 for that :wink: