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