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:
- we’ve put cacheDuration to 0, preloadPreviousPage and cache to false in the framework7App configuration.
=> this does not prevent any of the caching behaviour - 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. - 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!