Dynamic Flash

At Featurecreep HQ we're currently working on the next iteration of our flagship content management system. Whilst thrashing out the UI for a particular part of the administrative interface, we came across a requirement to display a lot - and I mean a lot - of information in a DataGrid control. Having had previous bad experience with the Tree control, I wanted to do a proof of concept before commiting to the idea.

My first attempt was just as you'd expect: create a loop that, on each iteraction, added a row to the DataGrid using the addItem() method...

This worked out to be painfully slow in my PowerMac G5 at work, taking over 45 seconds to populate the DataGrid. Ouch! Not only is this an unacceptable amount of time to force the user to wait, it also meant that the 15 second script timeout alert popped up at least 3 times. Faced with such an uphill struggle, it was at this point that I started to think about adding the rows in batches over a number of seconds using intervals. Fortunately I don't give up that easily, and set about finding some way to optimise the code.

I wondered if it might be quicker if I built the array of items first and then added them to the DataGrid using the dataProvider property. I knew that the Array class has some mix-in methods applied when you include any V2 component in your SWF, and I figured that these must be optimed for speed. The method I was particularly interested in was the addItem() method so I decided to give it a go...

The total time for populating the DataGrid this time was around 19 seconds; a 3x increase in speed compared to adding each item directly to the DataGrid. Not bad, but still under the default 15 second script timeout limit and so still not acceptable.

On further testing it seemed that it was taking only a fraction of a second to assign my data provider to the DataGrid. The rest of the execution time was taken up by populating the data provider in the loop. Thinking that the mix-in methods maybe weren't so optimised after all, I tried using Array.push() to see if that was any quicker...

Result! Total execution time for the above code was just over 4 seconds. That's almost 5x the speed of using the mix-in methods, and 15x the speed of using DataGrid.addItem(). I'm not sure what extra functionality the mix=in methods perform, but for our purposes they certainly aren't worth a 5x increase in execution time.

So, the moral of this little tale is not to use the data provider mix-in methods unless speed of execution isn't a requirement or you absolutely must; this probably applies to all of the list-based controls in the V2 UI component set.

My next task is to see if I can find a more efficient way of sorting the data when you click on a column header. Wish me luck!

PS. Please excuse the small code text and lack of syntax highlighting. I've just updated to Wordpress 2.0 but my usual syntax highlighting plugin has not yet been updated.