Shocked about initialization performance

devocular · April 11, 2014, 7:31pm

Hi guys,
i admit i was a bit aware of this, but just to have some data to post i ran a simple experiment.
I noticed that Phonegap apps powered by ionic take 3 times the time to show of a normal phonegap app.

so i inserted in my APP a simple JS that log time loading between each tag this are the results:

04-11 21:27:14.515: I/Web Console(2410): Before JS tags: 1397244432189
04-11 21:27:14.515: I/Web Console(2410): After Ionic.Bundle tag: 1397244433666 (1477ms elapsed)
04-11 21:27:14.515: I/Web Console(2410): After Restangular tag: 1397244433713 (47ms elapsed)
04-11 21:27:14.515: I/Web Console(2410): After Lodash tag: 1397244433926 (213ms elapsed)
04-11 21:27:14.515: I/Web Console(2410): After Moments tags: 1397244434131 (205ms elapsed)
04-11 21:27:14.515: I/Web Console(2410): After custom scripts tags: 1397244434514 (383ms elapsed)

as you can see, ionic.bundle tag takes 1,4 seconds only to load! i’m a bit shocked. i didn’t expect such value in an about-empty app.
as you can see other scripts (including my “custom scripts” that are Angular controllers/services not concat-ed or minified) takes relatively few time…

I run the test on my Galaxy S2 (Android 4.1.2+)

do you have same problems?

Calendee · April 12, 2014, 3:42pm

You mind posting your <head>? Are you linking to Ionic remotely or do you store it locally?

Device type and version?
Cordova Version?
Ionic Version?

This running in simulator or device?

Also, can you show the code you are using to generate these load times?

devocular · April 12, 2014, 4:16pm

Sure, the code is at bottom.

Device: Samsung i9100 (Galaxy S2) Android 4.1.2
Cordova 3.4 (latest)
Ionic 1.0.0 beta.1 (latest not nightly)
ionic filest stored and loaded locally, not remotely.

Here is the code:

<script>
    var timedEvents = [];
    function timeEvent(name) {
        timedEvents.push({'name': name || 'unnamed', time: Date.now()});
    }

    function showTimedEvents() {
        var timeText = '';
        
        for (var i = 0; i < timedEvents.length; i++) {
            var timedEvent = timedEvents[i];
            timeText += timedEvent.name + ': ' + timedEvent.time;
            var diff = '';
            if (i > 0) {
                diff = (timedEvent.time - timedEvents[i-1].time);
                timeText += ' (' + diff + 'ms elapsed)';
            }
            timeText += '\n';
        }
        console.log(timeText);
    }
</script>

<!-- ionic/angularjs js -->
<script>timeEvent('Before JS tags');</script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script>timeEvent('After Ionic.Bundle tag');</script>
<script src="lib/restangular/dist/restangular.min.js"></script>
<script>timeEvent('After Restangular tag');</script>
<script src="lib/lodash/dist/lodash.min.js"></script>
<script>timeEvent('After Lodash tag');</script>
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/moment/lang/it.js"></script>
<script src="lib/moment-timezone/min/moment-timezone.min.js"></script>
<script src="lib/angular-moment/angular-moment.min.js"></script>
<script>timeEvent('After Moments tags');</script>

<script src="lib/AngularJS-Toaster/toaster.js"></script>

<script src="js/moment-timezones-data.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>

<script src="js/services.js"></script>
<script src="js/services/netService.js"></script>
<script src="js/services/updaterService.js"></script>

<script src="js/repositories.js"></script>
<script src="js/repositories/eventsRepository.js"></script>

<script src="js/controllers.js"></script>
<script src="js/controllers/events.js"></script>
<script>timeEvent('After custom scripts tags');</script>

Calendee · April 13, 2014, 2:52pm

Here are my results after removing a lot of the scripts that aren’t a standard part of Ionic. I created a clean project using the “Getting Started” with a sideMenu sample.

Before JS tags: 1397400636903
After Ionic.Bundle tag: 1397400637070 (167ms elapsed)
After custom scripts tags: 1397400637093 (23ms elapsed)

Ionic : Beta 1
Cordova : 3.4.1-0.1.0
Device : iOS Simulator
All Files Local

devocular · April 13, 2014, 5:40pm

Hi @Calendee!
These are great results, but i don’t think they are comparable with mines as you tested it

on iOS (me Android)
on a simulator (me on a real device).

Also, i haven’t really got if you rebuilt the ionic bundle js leaving out some part of it or, for “removing a lot of the scripts that aren’t a standard part of Ionic” you intend you haven’t included any extra js file like Moment, Restangulat etc.

It would be great i could obtain the same numbers for the sideMenu sample project on an Android medium phone (like Samsung i9100)…

devocular · April 14, 2014, 10:41am

I’m adding some details on further tests i’ve done.

I want to underline that the reason i started to make tests was made beacuse my app taken 7-8 seconds to start on my i9100. - just unacceptable.

Trying to investigate on what could be the problem i tried to try furhter tests removing JS from my page.

Test #2

replaced ionic.bundle.js (over 1,2MB) with ionic.bundle.min.js (about 256KB)
Results: no change as in the first test i saved 400ms, in successive tries of the same test i reached 1700ms so the average is still 1400ms - real time elapsed to appear the index.html: 7-8seconds

Test #3

removed any custom JS (controllers, etc).
Results: in average saved about 100ms - real time elapsed to appear the index.html: 7-8seconds

Test #4

removed any additive library (Restangular, lodash, Moment, toaster…)
Results: saved additive 100ms - real time elapsed to appear the index.html: 6-7seconds

Test #5

removed all. Just loaded the index.html with the ionic CSS and cordova.js . no other script at all. i made this test just to make sure there aren’t external problems with the app config etc.
Results: saved 4+ seconds - real time elapsed to appear the index.html: 4seconds

Test #6

same as Test#5. but i added ionic.min.js .
Results: saved 3+ seconds - real time elapsed to appear the index.html: 5seconds

Last year i made an app with Cordova+Jquery+JQMobile and the total time for the first screen to appear was 4-5seconds (on the same device)

Conclusions: i think the problem here is the processing of all the angular+ionic JS… i think the main CPU eater is Angular. (Don’t think i’m against angular, i love it and i already developed an offline admin panel but actually performance on mobile are aweful)

I think i’ll go straight trying to use Ionic without Angular. i’ve seen in the unit test source code some sample to use Ionic core js lib. It would be great if you could write some doc about it.
Still in doubt if use jQuery or ReactJS to make the dirty work - (no idea about reactJS performance on mobile)

Hope this help. Feel free to add your test results.

Calendee · April 14, 2014, 1:03pm

So, here are my results on device :

iPhone 5S

[Log] Platform ready! (app.js, line 13)
[Log] Before JS tags: 1397480266862 (index.html, line 35)
After Ionic.Bundle tag: 1397480266932 (70ms elapsed)
After custom scripts tags: 1397480266942 (10ms elapsed)

iPhone 4S:

Before JS tags: 1397480454938
After Ionic.Bundle tag: 1397480455169 (231ms elapsed)
After custom scripts tags: 1397480455201 (32ms elapsed)

I didn’t create a custom Ionic bundle build. What I meant was that I removed everything but Ionic as they were irrelevant.

My point here is that this all depends on the device. A faster device will load these files faster than a slower device. There’s not much the Ionic team can do about that. Combining AngularJS and Ionic will create a pretty large file. All of that has to be processed.

Yes, I’m sure there are some low hanging fruit in code optimizations. However, at this point, Ionic is focussed on features and bug fixes. At some point, I’m sure the Ionic team is going to focus more on performance. However, I don’t expect massive gains.

So, you have to decide what is best for you and your users.