Cordova app performance varies greatly between Android versions

To be transparent, I am not using ionic (just cordova) and I also posted here , but with no response, so I’m hoping maybe someone on this forum has a tip for me.

My environment:
Android Studio 2021.3.1
cordova 11.0.0
gradle-7.5
Android Gradle Plugin 7.2
JDK 11 (Microsoft open version) - 11.0.15 (Microsoft 11.0.15+10-LTS)
Node v14.15.0
NPM 8.1.2
Target SDK = 32

Plugins: media@6.0.0, insomnia, email-composer, wkwebview-file-xhr
Other: jquery, abcjs music notation library, fontawesome

A similar question has been asked here but that was over 9 years ago and looking for any updated info and for my specific issue.

I’m struggling with a wide range of performance on different Android devices for my Cordova app. Android studio emulation for me seems to be fast on Android 7 but slow on Android 10 and unusable after that. The app works great on my Android 7 device. A friend’s Android 10 device will hardly function. Android’s pre-launch report gives one crash (ANR in com.android.systemui;PID: 756;executing service com.android.systemui/.dump.SystemUIAuxiliaryDumpService;) with 2 out of 8 devices having performance issues, both of them being Android 8.1, with working emulators from version 8 through 12.

Based on research, it seems the issue may be related to

  1. editing html with JavaScript (due to bringing in text from external files, needing to populate data at runtime, etc) (I have 142 document.write statements. Does replacing innerHTML with jQuery have a different impact than writing a div?)
  2. use of $.get (purpose is to enable use of txt files to populate the app which can be easily edited on their own and copied into different projects. It also prevents having a huge index.html file. I load approx. 1 MB of text into memory and then just replace html as needed.)
  3. for loops (I use structure var i = 0, len = importArray.length; for (; i<len; i++) {)
  4. many file references? (~9 css files, several .js files)
  5. possibly use of jQuery or maybe the abcjs library (I used to load jQuery mobile but removed it, but that didn’t impact performance)

The app must also be usable as a webpage to limit amount of extra effort (thus my use of Cordova), example: Online Hymnal. I also use local storage instead of databases so that it has the same functionality on the web and to make it easier to maintain the text files.

Are any of the following relevant to try to incorporate in my project? I don’t know where to start with further troubleshooting apart from perhaps removing the abcjs library and comparing functionality, or starting out with nothing and incrementally adding things until the performance dips, which would take some time.

  1. Threading (can we even do this outside plugins? I see notices like “Skipped 95 frames! The application may be doing too much work on its main thread.”)
  2. Crosswalk is suggested here, but this states it does not work for Android 10+ (which is a version I’ve seen problems with). Maybe a similar webview tool exists?
  3. Conversion to Ionic - sources say that won’t improve performance since it’s built on Cordova
  4. I’ve already redesigned the app once to pull in one song at a time rather than the whole hymnal into the index file, but maybe there is a different approach to coding that I need to consider based on my example Online Hymnal
  5. Something else? I was hoping for a quick fix like Crosswalk apparently was at one time, but I’m not seeing it.

Note: I tried to use Profiler with the Android Studio emulators to evaluate performance, but it shows “no supported devices”. A separate issue.

What seems to have resolved the performance issues is as follows:

  • Upgrade Android Studio (2021.3.1 RC1) along with other upgrades it suggests
  • Utilize proguard (File > Project Structure > Build Variants > All modules/releases > Minify Enabled = true) with a proguard rules file containing:
-keep public class org.apache.cordova.** { *; }
-keep public class nl.xservices.plugins.Insomnia { *; }
-keep public class de.appplant.cordova.emailcomposer.** { *; }
  • Replace tables with divs

Also, one user had to uninstall a conflicting app that was utilizing outlandish permissions.