I originally measured with four devices: iPhone 3GS, iPhone 4S, iPad 2, and 3rd generation iPad. While I procrastinated writing this post, new devices were released (and bought). So I made additional measurements on iPhone 5S and retina iPad Mini as well.
In all measurements, I used Cordova 3.0 (although
3.1 3.2 3.3 is already released). I had the console plugin installed, but no other plugins. The template I used was a stripped down version of the default project template (see this gist for the complete HTML I used). I had three versions:
cordova.jsand jQuery 2.0.3
The versions of jQuery and jQuery Mobile are the latest versions at the time of making the first measurements.
I measured the time between a script element in the beginning of
head and the
deviceready event to fire (as you can see from the template). With each device, I measured every version 10 times to get more reliable data.
The results are summarised in the figure below. The raw data is also available.
The results show no real difference between iOS 5 and 7 on iPad 2 and between iOS 6 and 7 on 3rd generation iPad. Neither is there much difference between those two devices. iPhone performance has clearly improved in newer devices. The same is true for iPad Mini. Nothing surprising in that, though.
What is notable is that jQuery Mobile does affect the start-up time of the application quite significantly. In most devices, it takes around 0.5s for the
deviceready event to trigger. And over 0.4s even on the latest iPhone, not to mention the over a second on 3GS.
So what can we learn from the results? I’d say that if you target older versions of iOS which run on 3GS (or, perhaps iPad 1), you should think long and hard before you adopt a large library like jQuery Mobile. If you still device to go with jQuery Mobile (or similar libraries), the load speed of the app could (and should) be improved by loading the libraries after
deviceready. Also, I used the complete library, and you should definitely build your custom version with only the needed components.
As with most questions in software development, my suggestion whether or not to use libraries in Cordova apps is “it depends”. It is a balance between app load performance and developer productivity. Just keep in mind that the libraries you use can have a big impact on load times. Personally, while I do have an app in the app store (published by my previous company) that uses jQuery Mobile, I would not use it in a new project.
What do you think? Do you use libraries in your Cordova apps?
Update: If you read this far, you might also want to check out the post about whether you should minify your resources in a Cordova/PhoneGap app.