Trying to understand "deviceready" latency

[pamela fox]

Hey folks -

I'm making an app where one of the common uses is to record a photo
that's auto saved and time stamped - so all users have to do is open
the app, press a button to trigger the camera app, and take the
picture. So I'm trying to get the "open the app" phase to be really
quick, so users don't feel any friction in using the app.

Today I moved from jQuery to Zepto, and I shaved a good 400ms that
way. You can see my loading times in this spreadsheet:
https://docs.google.com/a/everyday.io/spreadsheet/ccc?key=0Aq_a4WNAMuCEdDdjSlhyWXJaTkQ0TVJFc1k1RzlTTlE#gid=0
*These were done on an Android N1.

I now have it so that all the steps up until the document ready event
take about 1000ms, but then there is still an average of 3000ms after
that until the deviceready event fires -- and I need that event to
fire for the user to be able to use the Camera API.

So, I'm trying to understand more about that event, why it's slow, and
what I can do (if anything) to speed it up. A few questions to guide
me:
- Does the deviceready event depend on how long the page takes to
load, or is it independent of that process? (i.e. if I get the page to
load even faster, will deviceready fire sooner?)
- How much does the deviceready event latency vary based on device? Is
what I'm seeing on the slower end, average, faster?
- Is the deviceready event affected by how many files are in the app
package? Is it affected by the amount of data storage used by the app?
- Does the deviceready event coincide with the visual appearance of
the webpage? (I tried to time this to see, and I think it does not,
but I'm not certain).

Thanks for any clarification you can provide!

[Bryce Curtis]

The startup events for Android are given in phonegap.js:

/** 

 * The order of events during page load and PhoneGap startup is as follows: 

 * 

 * onDOMContentLoaded Internal event that is received when the web page is loaded and parsed. 

 * window.onload Body onload event. 

 * onNativeReady Internal event that indicates the PhoneGap native side is ready. 

 * onPhoneGapInit Internal event that kicks off creation of all PhoneGap JavaScript objects (runs constructors). 

 * onPhoneGapReady Internal event fired when all PhoneGap JavaScript objects have been created 

 * onPhoneGapInfoReady Internal event fired when device properties are available 

 * onPhoneGapConnectionReady Internal event fired when the connection property has been set. 

 * onDeviceReady User event fired to indicate that PhoneGap is ready 

 * onDestroy Internal event fired when app is being destroyed (User should use window.onunload event, not this one). 

 * 

 * The only PhoneGap events that user code should register for are: 

 * deviceready PhoneGap native code is initialized and PhoneGap APIs can be called from JavaScript 

 * pause App has moved to background 

 * resume App has returned to foreground 

 * 

 * Listeners can be registered as: 

 * document.addEventListener("deviceready", myDeviceReadyListener, false); 

 * document.addEventListener("resume", myResumeListener, false); 

 * document.addEventListener("pause", myPauseListener, false); 

 * 

 * The DOM lifecycle events should be used for saving and restoring state 

 * window.onload 

 * window.onunload 

 */

Logging PhoneGap.Channel.prototype.fire() plus a few other details, I get the following times on the original Motorola Droid with 2.2.3.

11-23 17:26:48.309: D/DroidGap(2036): DroidGap.loadUrl(file:///android_asset/www/index.html)

11-23 17:26:48.512: D/DroidGap(2036): DroidGap.onResume() - Lifecycle

    Time to init PhoneGap native app = 203ms

    

11-23 17:26:48.536: D/DroidGap(2036): DroidGap: GapViewClient.onPageStarted(file:///android_asset/www/index.html)

11-23 17:26:48.809: D/DroidGap(2036): DroidGap: GapViewClient.onLoadResource(file:///android_asset/www/master.css)

11-23 17:26:48.809: D/DroidGap(2036): DroidGap: GapViewClient.onLoadResource(file:///android_asset/www/phonegap-1.2.0.js)

11-23 17:26:48.809: D/DroidGap(2036): DroidGap: GapViewClient.onLoadResource(file:///android_asset/www/helloPlugin.js)

11-23 17:26:48.809: D/DroidGap(2036): DroidGap: GapViewClient.onLoadResource(file:///android_asset/www/sharedPreferences.js)

    Time to load HTML and JS files = 273ms

11-23 17:26:49.215: I/Web Console(2036): Starting PHONEGAP.JS at file:///android_asset/www/phonegap-1.2.0.js:23

11-23 17:26:49.395: I/Web Console(2036): fire(onDOMContentLoaded) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:26:49.411: I/Web Console(2036): window.onload() at file:///android_asset/www/index.html:1075

11-23 17:26:49.575: I/Web Console(2036): fire(onNativeReady) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:26:49.583: I/Web Console(2036): fire(onPhoneGapInit) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:26:49.668: I/Web Console(2036): fire(onPhoneGapInfoReady) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:26:49.747: I/Web Console(2036): fire(onPhoneGapReady) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:26:49.864: I/Web Console(2036): PhoneGap.fireDocumentEvent(online,undefined) at file:///android_asset/www/phonegap-1.2.0.js:589

11-23 17:26:49.879: I/Web Console(2036): fire(onPhoneGapConnectionReady) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:26:49.973: I/Web Console(2036): fire(onDeviceReady) at file:///android_asset/www/phonegap-1.2.0.js:202

    Time from start of phonegap.js execution to deviceready event = 758ms

 ...

11-23 17:48:10.770: D/DroidGap(2036): DroidGap.onDestroy() - Lifecycle

11-23 17:48:10.794: I/Web Console(2036): fire(onDestroy) at file:///android_asset/www/phonegap-1.2.0.js:202

11-23 17:48:10.809: I/Web Console(2036): window.onunload() at file:///android_asset/www/index.html:1112

11-23 17:48:10.872: D/DroidGap(2036): DroidGap.endActivity

The app is a demo app that loads every plugin, plus a couple of other test plugins.  The index.html size=52,930 bytes.  The apk file size=475,482 bytes (I have a lot of other files in this demo).

Hope this helps explain the timings you are seeing.

[pamela fox]

Thanks, that helped a lot -- I went in and added those same timing
logs to my app, and I found that it was taking a long time to fire the
onNativeReady event. After a lot of commenting out and whatnot, I
figured out that the latency was due to my app sending off an
XMLHttpRequest after the body onload event. I've now moved all XMLHRs
into the deviceready callback, and I'm getting the deviceready event
much faster (more along the lines of your timing).
I'm curious as to why doing an XMLHR would cause a latency in the
onNativeReady event, do you know?
Thanks!
- pamela

[Simon MacDonald]

I believe it is because the onNativeReady event does not fire until onPageFinished is achieved in the native Android code and that seems to depend on onLoad being complete. Interesting.

Simon Mac Donald
http://hi.im/simonmacdonald

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com

[elsigh]

Quick question - what did you do to add this logging? (sorry, but I'm a Java nincompoop).

[pamela]

I added the timing for the PhoneGap events in the relevant
phonegap.js, in the PhoneGap.channel.fire method:
PhoneGap.Channel.prototype.fire = function(e) {
if (this.enabled) {
window.ED && ED.timing && ED.timing.timeEvent('Firing ' +
this.type);
...

That uses my timing function from http://blog.pamelafox.org/2011/10/phonegap-loading-performance-in-ios.html

I don't think I had to add any logging in Java files, just that JS.

- pamela

[David]

I do the standard setup in my PhoneGap app:

window.onload = function() { /* start JS timing */ document.addEventListener("deviceready", ready, false); }

function ready() { /* end JS timing */ }

I was doing timing analysis to see where in my app I could optimize to reduce my app response time. On an LG Optimus One P500 running Android 2.2.1, I am seeing a consistent 700 ms between start and end timing at the above indicated points.

1. Is 700 ms typical/normal?

2. How much variation exists for "deviceready" on different physical devices?

3. Are there any hints to trim this 700 ms?

4. If I don't use certain PhoneGap APIs, is there a way to shut them down thus reducing deviceready time?

Thanks,

David

[Lindsey Simon]

What if you remove all your external resources? 

I'd start there and see what the latency is. Without seeing your page it's pretty hard to guess where that 700ms goes.

But it seems like no matter what the browser has to instantiate itself, load and parse cordova.js at the very least.

--

-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 

To compile in the cloud, check out build.phonegap.com
---
You received this message because you are subscribed to a topic in the Google Groups "phonegap" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phonegap/Gr8tR_tiFrY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.