Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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

  • 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>.


  • Onsen UI

    @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.

  • 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!

  • Onsen UI

    @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.