Performance: Grid vs FlexTable

I’ve been having some problems in GWT with a table pulling 100+ rows at a reasonable speed using the FlexTable, but before making massive changes by switching to a Grid I ran some tests comparing the two.  I originally found this issue when testing on IE for the first time after having no problems with FF

Here’s the basic code used:

long startTime = System.currentTimeMillis();
for (int i = 0; i < names.length; i++) {
    NameData nd = names[i];
    grid.setText(i, 0, nd.getName());
    grid.setText(i, 1, Double.toString(nd.getD1()));
    grid.setText(i, 2, Double.toString(nd.getD2()));
    grid.setText(i, 3, Integer.toString(nd.getRank()));
}
gridLabel.setText("Grid: "+(System.currentTimeMillis()-startTime)+"ms");
 
startTime = System.currentTimeMillis();
for (int i = 0; i < names.length; i++) {
    NameData nd = names[i];
    flex.setText(i, 0, nd.getName());
    flex.setText(i, 1, Double.toString(nd.getD1()));
    flex.setText(i, 2, Double.toString(nd.getD2()));
    flex.setText(i, 3, Integer.toString(nd.getRank()));
}
flexLabel.setText("FlexTable: "+(System.currentTimeMillis()-startTime)+"ms");

I’m pulling from an array of 100 which holds some data that’s used to populate the cells.  The creation of the tables is done before hand, I’m not sure if this gives an unfair advantage to the Grid, but that’s the way I’m doing it.

Try the test app yourself here .

Results
What I’m finding is that the Grid does beat the FlexTable, but not by much with a small data set.  Larger sets seem to widen the gap.  My guess for this is that since FlexTable has the ability to add rows (Grid is sized from the start) that it works much like how other resizable constructs work such as Java’s ArrayList. My reasoning for this is that the first time the test is run the speed is very slow on the FlexTable (especially in IE).  Repeated test runs after the initial are faster and I think this is because the table was being sized the first time as rows were added, and didn’t need to be resized during the following tests.

The other thing I’m finding is that performace varies based on browser.  I’m seeing FF run reasonably well.  With IE the Grid runs about the same as FF but the FlexTable runs considerably slower.  I also tested Opera and was stunned as it blew both others out of the water. 

Here’s some of the tests run with two different machines (one linux and one Windows):

MS Windows Machine

FF FF IE IE
Grid FlexTable Grid FlexTable
Run 1 147ms 198ms 156ms 1297ms
Run 2 131ms 158ms 156ms 203ms
Run 3 150ms 176ms 156ms 172ms

Linux Machine

FF FF Opera Opera
Grid FlexTable Grid FlexTable
Run 1 89ms 244ms 37ms 118ms
Run 2 85ms 115ms 31ms 41ms
Run 3 86ms 115ms 28ms 41ms


3 Comments

  1. Michal Huniewicz says:

    That’s an interesting comparison (would be even more if there were more browsers). Did you try comparing setText to setHTML as well?

  2. Rytis says:

    For me your test shows 21ms for Grid, and 18ms for FlexTable, and similar in subsequent tests with the Grid lagging behind by a few ms. Using Chromium on Ubuntu 9.10 .

  3. Nick says:

    Odd results.
    I decided to run a couple of my test on my same linux box 9.04(too lazy to upgrade) with a newer FF so the speeds are better….
    FF grid 114ms flextable 158ms

    I then tried Chrome with grid 24ms & flextable 34ms.
    I figured maybe Chrome was opimized for GWT maybe…but then I ran Opera which was almost as fast with grid 36ms & flextable at 46ms.

    Can’t believe Chrome and Opera blow away FF and IE isnt even in the park.
    Still, I havent come across situations where a FlexTable beats a Grid.

Leave a Reply