06-24-2012 11:41 AM
I am running into a performance issue with a webapp that I have converted to a webworks application. Essentially the app displays various lists of people with their name and a small photo next to them (the photos are about 10kb on average). I built a webapp using jQuery, it tooks some tweaking, but I got the performance pretty solid in the blackberry browser. Each list page contains about 75 people (with the small photo), the transition time between these pages on the webapp is about 1 second. The webapp is a single page structure, and I add and remove a class to transition between lists.
I recently created a webworks app and installed it. Unfortunately the same transition between pages takes about 20 to 25 seconds. I took a second shot at re-structuring the app and used the BBui.js (which is really great by the way). I got it up and running, but the transition time between lists is still very slow. It was reduced, instead of taking 25 seconds, it takes 8 to 10 seconds between list pages. It’s still unusable compared to the 1 second transition in the device browser.
The list pages are generated during the “onScreenReady” portion of BBui functions. It loops through data from localStorage and creates the list by putting all of the text and photo reference (photos are stored local as well) into a single variable. When the loop is complete, I append the entire thing to the element in a single action using jQuery append. The loop isn’t very long, less than 225 items. I’m assuming it is the images that are problem, but I’m not sure why it performs well as a browser app, but not as a webworks installed app. Any suggestions?
06-28-2012 03:41 PM
There are some significant performance differences between WebWorks apps and the full Browser that you are encountering directly. The Browserfield component that WebWorks apps are based on has less memory and fewer resource threads available to it than the Browser itself. The WebWorks framework does a lot to try and manage these limited resources, but they are still limited. In your app's case, managing all those images is going to use up a lot of those resources.
Have you tried looking at this in the Profile view and Timeline in Web Inspector? That should narrow down where the time is spent.
If you are able to combine the images into a single file and use CSS Sprites to display each photo as a background, you may save a significant amount time too.
07-10-2012 08:20 PM
There was a background image as well as a lot of gradients and border-radius stuff going on in the CSS file. I took out most of it and it increased performance to almost instantaneous switching between pages.
08-27-2012 06:08 PM
Yes that's a lot of CPU intensive stuff on the main rendering thread. This kind of thing will run much better on PlayBook, and I expect very well on the BlackBerry 10 devices, but it's pretty heavy for a BBOS Java phone.