Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Widget Performance, innerHTML changes

I have a widget where users select an item and 'carousel' through the data related to that item using the left and right convenience keys. When the item is selected I load the data in a global array. As the user hits the convenience key, I progress or regress through the array I simply replace the innerHTML of a div on my page with the html table contained in the array.

 

I'm not experiencing a smooth behavior out of this. How can I improve performance in this type of DOM work?

_________________________________________
www.jasonmace.com/blackberry
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Widget Performance, innerHTML changes

[ Edited ]

Hi jmace,

 

If you are looking to create a UI something like AppWorld where the user carousel's through items and have them slide/fade in, you will likely want to use SVG.

 

An SVG object will give you around 14-16 frames per second of animation.  SVG objects in the 5.0 browser are entirely scriptable and you have full access to the SVG DOM.

 

I've found that SVG is very responsive and smooth for such an application.  In 5.0 the browser supports SVG Tiny 1.1

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: Widget Performance, innerHTML changes

Tim,

 

The slide/fade in behavior would be a nice visual. I may pursue that in a later version.

 

My issue is that the delay from pressing a convenience key to my div's content changing seems to be too much. (3 or more seconds). It leads to users tapping the convenience keys multiple times and going past the data they wanted to view. It just has an 'unreliable' feel to it and would make me want to stick to menu navigation only.

 

Any thoughts/ideas?

_________________________________________
www.jasonmace.com/blackberry
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Widget Performance, innerHTML changes

Are you also retrieving content at the same time as making the UI changes?  The UI will not update until your JavaScript thread ends.  So if you are doing lengthy processing the UI will not update until all of your JavaScript code completes executing.

 

If I am updating an area of the DOM and I'm also making some data requests/processing as well, I will use setTimeout() to tackle this.  Typically I will make an immediate change in the UI that doesn't require the data and maybe show a "loading" if it will take a long time.  Then call the setTimeout() to call the JavaScript function in about 300ms to retrieve the data.

 

This way the UI will update immediately to give my user the visual que and then when the data is retrieved I will show it on the screen.

 

Another approach is to do a layered div that covers the screen with a translucent PNG with a loading image on it and when the screen below has been updated make the layered div invisible.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Developer
New Developer
hp3
Posts: 32
Registered: ‎10-07-2009
My Device: Not Specified

Re: Widget Performance, innerHTML changes

As an alternative approach have you tried placing the data from the array within groups of pre-formatted html div containers each of which is hidden and stacked upon each other using absolute positioning and z-index?  Then as the user navigates through the carousel, javascript shows the appropriate div and hides the previously visible div.  I guess this is like the deck of cards metaphor.

 

I dont know that this would be faster than updating innerHTML but perhaps there could be something different in the way that the browser updates innerHTML vs. showing and hiding pre-existing elements. 

 

Please use plain text.