ons-navigator performance with a lot of ons-page elements
christophemarois last edited by
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
@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
setTimeoutshould be fine, I think).
Same when popping page, add another page at the beginning of the stack asynchronously.
Otherwise, you can try adding
display:noneto 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.
christophemarois last edited by 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
<v-ons-navigator>), combined with the native vue elements
<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
@christophemarois Thanks for the code. I think that’s not using Onsen UI page animations at all, only custom Vue transitions. Even the
ons-navigatorincluded there is not doing anything, you can just replace it with a simple
I’ll try to fix the mentioned GitHub issue when I have some time, hopefully in a few weeks.