GWT: 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. MS Windows Machine
Linux Machine

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):

 

	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

 

	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

reprint： http://whatwouldnickdo.com/wordpress/401/performance-grid-vs-flextable/