IronRouter+template Template takes 5-7 seconds to load on iPad2 / iOS 8.3


#1

I am using latest version of Meteor. There are multiple pages in our app. We use Iron router and default template engine.
What is happening when I click on a given icon is the router’s code fires, then there is a 5 second or so delay, and then the template onCreated is fired.
I am attaching a log output from XCode. Line 4 shows that the Router logic is completed. Time stamp is 10:28:02. Then nothing happens for almost 5 seconds. Then I see a bunch of meteor cordova debug loading filepath statements. Template’s onCreated function is called at 10:28:07.565.
This is causing massive issues with user experience. These files are not being downloaded from server side either. (More debug information at the bottom).

2015-06-19 10:28:02.296 MY APP [659:141892]  ******************* PRODUCTS OPEN clicked ****************
2015-06-19 10:28:02.297 MY APP [659:141892]  ******************* PRODUCTS go to router done ****************
2015-06-19 10:28:02.316 MY APP [659:141892] ######### rendering the template now ******
2015-06-19 10:28:02.389 MY APP [659:141892] ######### PRODUCTS - on onAfterAction ******
2015-06-19 10:28:07.045 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/new-product-title.png for path: %2Fimages%2Fproducts%2Fnew-product-title.png
2015-06-19 10:28:07.066 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/rewards/star-1-rewards.png for path: %2Fimages%2Frewards%2Fstar-1-rewards.png
2015-06-19 10:28:07.085 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/fill-lunchbox/go-home-cloud.png for path: %2Fimages%2Ffill-lunchbox%2Fgo-home-cloud.png
2015-06-19 10:28:07.107 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/fill-lunchbox/explorer/Maderight-logo.png for path: %2Fimages%2Ffill-lunchbox%2Fexplorer%2FMaderight-logo.png
2015-06-19 10:28:07.128 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/background/share-cloud.png for path: %2Fimages%2Fbackground%2Fshare-cloud.png
2015-06-19 10:28:07.141 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/background/facebook.png for path: %2Fimages%2Fbackground%2Ffacebook.png
2015-06-19 10:28:07.161 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/background/twitter.png for path: %2Fimages%2Fbackground%2Ftwitter.png
2015-06-19 10:28:07.178 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/smoothie-drinks-button.png for path: %2Fimages%2Fproducts%2Fsmoothie-drinks-button.png
2015-06-19 10:28:07.210 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/smoothie-red.png for path: %2Fimages%2Fproducts%2Fsmoothie-red.png
2015-06-19 10:28:07.227 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/smoothie-orange.png for path: %2Fimages%2Fproducts%2Fsmoothie-orange.png
2015-06-19 10:28:07.256 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/smoothie-green.png for path: %2Fimages%2Fproducts%2Fsmoothie-green.png
2015-06-19 10:28:07.281 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/aloe-copy-pow.png for path: %2Fimages%2Fproducts%2Faloe-copy-pow.png
2015-06-19 10:28:07.295 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/Blueberry-Aloe.png for path: %2Fimages%2Fproducts%2FBlueberry-Aloe.png
2015-06-19 10:28:07.328 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/lemonade-aloe.png for path: %2Fimages%2Fproducts%2Flemonade-aloe.png
2015-06-19 10:28:07.340 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/overlay/closebutton.png for path: %2Fimages%2Fproducts%2Foverlay%2Fclosebutton.png
2015-06-19 10:28:07.359 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/overlay/smoothiedrink-overlay.png for path: %2Fimages%2Fproducts%2Foverlay%2Fsmoothiedrink-overlay.png
2015-06-19 10:28:07.381 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/tellmemore-button.png for path: %2Fimages%2Fproducts%2Ftellmemore-button.png
2015-06-19 10:28:07.413 MY APP [659:142093] METEOR CORDOVA DEBUG loading filepath: /var/mobile/Containers/Bundle/Application/B8D31CE0-C58C-422E-83D9-C1906A2DE4F4/MY APP .app/www/application/images/products/takemeshopping-button.png for path: %2Fimages%2Fproducts%2Ftakemeshopping-button.png
2015-06-19 10:28:07.565 MY APP [659:141892] ######### PRODUCTS - CREATED
2015-06-19 10:28:07.766 MY APP [659:141892] ######### PRODUCTS - ON RENDERED COMPLETED

My meteor packages:

$ meteor list
appcache 1.0.4 Enable the application cache in the browser
bootstrap 1.0.1 Front-end framework from Twitter
cfs:filesystem 0.1.2 Filesystem storage adapter for CollectionFS
cfs:standard-packages 0.5.9 Filesystem for Meteor, collectionFS
chriswessels:hammer 3.1.1* Bundles Hammer.js and provides Template.templateName.gestures() for easy use of multi…
cordova:cordova-plugin-inappbrowser https://github.com/apache/cordova-plugin-inappbrowser/tarball/ba7cbe58d5812b51c3ece1e6b44524
email 1.0.6 Send email messages
fastclick 1.0.3 Faster touch events on mobile
gadicohen:phantomjs 0.0.2 phantomjs installation script; wrapper for node phantomjs package + Sun
ground:db 0.3.9* Ground Meteor.Collections offline
http 1.1.0 Make HTTP calls to remote servers
iron:router 1.0.7* Routing specifically designed for Meteor
jquery 1.11.3_2 Manipulate the DOM using CSS selectors
launch-screen 1.0.2 Default and customizable launch screen on mobile.
less 1.0.14 The dynamic stylesheet language
manuelschoebel:ms-seo 0.4.1 Easily config SEO for your routes
meteor-platform 1.2.2 Include a standard set of Meteor packages in your app
meteorhacks:fast-render 2.5.0 Render your app before the DDP connection even comes alive - magic?
meteorhacks:ssr 2.1.2 Server Side Rendering for Meteor with Blaze
reactive-var 1.0.5 Reactive variable
spiderable 1.0.7 Makes the application crawlable to web spiders
u2622:persistent-session 0.3.2* Persistently store Session data on the client

What I have tried:

  1. Appcache: our images are 55MB - so it complains a lot
  2. Fast Render: it doesnt do anything. We put our routes in main.js. I believe it is accessible by both client and server. Further, our problem is not about dynamic data and subscriptions.
  3. SSR: No joy
  4. launch-screen: to hold and then display - no joy there either.

This app works fine on web (chrome/FF), iPad 3, android tablets. We see this issue only on iPad 2.


#2

The iPad 2 only has 512MB of RAM whereas the iPad 3 has 1GB. That memory is also shared with the video card. I’m not sure but you might be hitting a bottleneck there.

See if the template hits onCreated faster when you turn off all or most images in the app. If that’s the culprit, you can optimize the images to take up less memory.


#3

So the issue is the UIWebView that ships Cordova/Meteor. It is extremely slow and also leaks memory.
In fact, it is slow in processing that we miss many events when reactive variables changes. Our functions don’t get called, or get called after a long wait (sometimes after 1-3 mins). As the app is used more and more, the problem worsens, maybe due to the memory leaks.

http://practicalmeteor.com/drastically-improving-the-performance-of-your-meteor-ios-app-with-wkweb​view/

This was the solution that worked very well for us. The app is super fast on older iPads. We dont miss any reactive variable call backs. It optimizes already loaded assets a little bit, so we dont spend so much time downloading assets. It was not very difficult to put in.

I hope Meteor/Cordova upgrade to this soon. I would not recommend anyone putting an app built with Meteor/Cordova in production that uses the default UIWebView. Heck, I came close to stopping work with Meteor because of it.


#4

Awesome man! We’ve been having the exact same issue for our app using Meteor + Famo.us. This is gonna change the game.