02-12-2010 11:04 AM
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?
02-12-2010 11:55 AM - edited 02-12-2010 11:55 AM
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
02-12-2010 12:52 PM
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.
02-14-2010 06:58 AM
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.
02-14-2010 02:05 PM
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.