androidperformancecordovahybrid-mobile-app

Extremely low running cordova app compared to smooth browser navigation

I am currently experiencing a very low app performance when generating my .apk file, using Cordova.

It is strange to me because when I run the HTML files on my PC web browser during the pre-building phase, the performance is smooth and fast.

It it not a problem with the emulator, as I experience similar behaviour on a phone used for testing.

I suspect it might be related to the amount of scripts I have on my index.html file, but I do not know for sure.

Here's the head

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components\bootstrap\dist\css\bootstrap.min.css">
    <link rel="stylesheet" href="css/boton.css">
    <script src="bower_components\jquery\dist\jquery.min.js"></script>
    <script src="bower_components\bootstrap\dist\js\bootstrap.min.js"></script>
    <!-- Virtual tour -->
    <script src="tour/dist/webtour.min.js"></script>
    <script>
    <!-- Webtour run once when web/application is open for the first time -->
    </script>
    <link rel="stylesheet" href="tour/dist/webtour.min.css" />
    <style>
    <!-- Styles defined here -->
    </style>
    <script>
    <!-- Other scripts of mine. Run when needed. Sometimes on load, sometimes on clic -->
    </script>
    <script>
    </script>
    <script>
    </script>
    <script>
    </script>
    ...
</head>

Here's the body

<body onload="iniciarTour();numeroTotalDeCanciones();">
    <!-- Estas son las instrucciones para los banners -->
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <div class="app" style="display:none;">
        <div id="deviceready" class="blink">
            <p class="event listening"></p>
            <p class="event received"></p>
        </div>
    </div>
    <div id="fullpage">
    <!-- long app content in html -->
    </div>

Do you notice anything strange?

I also had to add this lines to the config.xml file, to make it load:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Whatever</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <preference name="SplashScreenDelay" value="10000" /> <!-- Added to prevent app to get stuck on the splash screen -->
    <preference name="loadUrlTimeoutValue" value="700000" /> <!-- Added to avoid the error: The connection to the server was unsuccessful. (file:///android_asset/www/index.html) -->
</widget>

Do you know what might be not functioning?

Thanks!

Solution

  • The problem was that I was including lots of iframes on the content, making it extremely time consuming to load.
    To avoid this from happening, I modify all iframes src to "about:blank"
    Then, I modify src value of each iframe depending on user needs, displaying only its content if user is requesting or going to interact with it.