ons-navigator performance with a lot of ons-page elements

[christophemarois]

I use the Vue bindings, but I guess this question applies to Onsen in general.

I have an <ons-navigator> that can have up to 20 <ons-page> elements, every of which have computationally intensive elements such as animations. I noticed that the performance of the app decreases drastically as the page stack gets bigger, because the “inactive” views are in fact very much active in the background.

I tried to patch the stack navigation to only include three active pages at a time, but this is exceptionally difficult to do and I still haven’t found a way to do it reliably. Furthermore, dynamically removing elements at the page-stack array’s start makes the navigator glitch, and I have found no way of forcing the “back” animation of the navigator when I change the page stack but its size stays the same.

How does one typically handle this use case? I’m almost about to do my own alternative to <ons-navigator>.

Thanks!

[Fran Diox]

@christophemarois Hi! There is already an issue on GitHub about this gh#1992
I’d like to implement a solution at the core level but it’s not included in the immediate roadmap since having so many pages in an app is actually not that common.

I think in Vue bindings is probably easy to work around this. The VOnsNavigator only cares about the top page and the stack size to show animations. Therefore, you can push a new page and, in the next cycle, remove the first page element from the stack (either $nextTick or setTimeout should be fine, I think).
Same when popping page, add another page at the beginning of the stack asynchronously.

Otherwise, you can try adding display:none to the page elements that you don’t need and see if it improves the performance.

Perhaps when I’m done with the current roadmap I’ll try to find a solution for this issue.

ilmuwebsite created this issue in OnsenUI/OnsenUI

closed Very Slow After 20 pages more visit #1992

[christophemarois]

Hey @Fran-Diox thanks for your quick reply. No ons-navigator tricks could reliably improve the overall performance of the app, so I made a custom navigator in Vue.

It uses the native Onsen <ons-navigator> (not <v-ons-navigator>), combined with the native vue elements <transition> and <component>. Dynamic components in vue only hold one active element at all time, and are compatible with the native vue transitions, so they are a perfect fit for this issue.

I have made a barebone gist with the extracted code to make it work (untested, but should work). Maybe this will give you guys ideas to make <v-ons-navigator> more performant!

[Fran Diox]

@christophemarois Thanks for the code. I think that’s not using Onsen UI page animations at all, only custom Vue transitions. Even the ons-navigator included there is not doing anything, you can just replace it with a simple div.

I’ll try to fix the mentioned GitHub issue when I have some time, hopefully in a few weeks.