Caching behaviour framework7 slowing down app

We are using Framework7 (version 1.6) in combination with React, Redux & Cordova in order to build an app that should be made available in the App & Play Store soon.

The app has about 15 different pages which primarily show textual data. Graphically speaking, the app is not very complicated.

When we start the mobile app, the application is very responsive and feels native. However, after navigating between different pages (± 30 times), or after recovering the app from an idle state we notice that the performance of the app degenerates remarkably. We have reason to believe that this has to do with the way framework7 caches the pages. When we look at the DOM structure of the web application, we see that when changing pages, the old page remains in the DOM and gets the css class cached. Also when putting breakpoints in the react components representing the pages, we see that these pages remain active. In other words, when you visit a page 20 times, 20 instances of the pages will be created and any handlers (like reacts componentwillreceiveprops method) keep getting called for each one of these instances.

We currently think these pages that are not cleaned up are causing the performance degradation, so we have been trying to configure the framework7app such that this caching behaviour is prevented.

We have been trying multiple things to prevent this cachingbehaviour:

  1. we’ve put cacheDuration to 0, preloadPreviousPage and cache to false in the framework7App configuration.
    => this does not prevent any of the caching behaviour
  2. we’ve put domCache of the pages to false
    => this breaks the navigation. Once you navigate to a page you already visited, the app doesn’t navigate to the page anymore.
  3. We have even been trying to do any cleanup ourselves, based on methods that are used internally in the framework7 library. This is one of the methods we came up with in an effort to clean up these pages:
                var allPages = $(f7.mainView.pagesContainer).children('.page.cached');
                for (var i = 0; i < allPages.length-2; i++) {
                    f7.pageRemoveCallback(f7.mainView, allPages[i], 'left');
                    f7.router._remove(allPages[i]);
                    f7.mainView.allowPageChange = true;
                }
            }, 200);

=> This does clean up the containers properly and removes the cached pages from the DOM, but whenever this code has fired once, the performance of the app deteroriates tremendously and does not get better after a while, even when the performance was still acceptable before cleaning up the cache. Could you please tell us what we are doing wrong?

Can somebody give us some insights on what we might be doing wrong and if this behaviour is normal? Thanks!

1 Like

Yes, router in v1 wasn’t designed to be used with Vue/React libs to load components. So the domCache kind of a hack required for this to work more or less properly. And of course it should be disabled, which can lead to some issues with navigation. Your cleanup code looks ok for me, but i’m not sure how do you use with React as you must be sure that React component unmount correctly too.

All the issue with domCache and such memory issues were highly improved in v2 as its router was designed to be used with libs like Vue and React. So if you can, i can recommend you to move to v2

1 Like

@nolimits4web Thank you for your response. I am in the same team as the poster.

Up until now, a migration-guide to v2 was only written for vanilla framework7-apps. Since the app we are building uses react, we are wondering if we can expect a migration-guide for react any time soon? Or should we able to do the migration based on the vanilla-guide that was published in January? Do you have any advice for people who want to migrate from v1 to v2 using React?

We also use the package framework7-react. Is this still compatible with v2? We would like to move to v2 but I am not sure whether this is possible considering we heavily rely on react & redux apart from f7. Could you give us some insight with respect to this?

Unfortunately i’m not a maintainer of framework7-react package, but i’m sure author works on updating it to v2. So when it will be released you should be able to migrate