Recently, I have been coding in Cordova a lot for the company I work for. For those of you who don't know, Cordova is a cross platform development tool for mobile applications which is web based. Essentially you can use your HTML/JS/CSS to make Android and iOS applications. However, I come from a heavy OOP background and in the past have made Android applications using Java in Android studio.
Wherever possible, it is my instinct to separate code out, separate java/javascript files to cover different groups of functions. Trying to maintain readability. However, because of how Cordova works, I wonder about best practice coding. In particular, how to handle HTML. In an app, it is standard practice to have many separate pages, in which events happen. You have your home, your settings, your different interaction pages.
Here is where my problem lies. As far as application performance, it seems like having one HTML page would be best. Put in all my .js files in script tags, and have each "page" of the app just be a div that is "display:none" until it is needed. This approach means that the app only has to load resources once, and is therefore faster, however, it just feels dirty to me.
The downside of this approach is that you have to change display states of every page constantly, not to mention you soon have an HTML page that is nine miles long. It makes it harder for future coders to read.
So, in this case, what is best practice? Do I take the higher performance, but low readability option? Or do I separate out the pages and reload resources? Is there maybe a third option that I haven't considered? Any opinion would be appreciated.