GWT - Big tables load slow on IE7/8

问题

I got a table which has no pagination, hence all records need to be displayed in one big flow with scrollbar. Using Flex table for the same.

Firefox has no big issues in loading the page, it loads 7000 records in about 90 seconds. But IE simply hangs with 800 records!

Our technical architect recommends to use celltable widget with innerhtml instead of full-fledged widgets.

回答1:

GWT's Grid and FlexTable are derived from a standard HTMLTable. Basically, every time you insert a table row, IE tries to reflow the entire table so the longer the table, the longer the reflow takes. Performance is therefore terrible in large grids.

You might be better off to use div elements and styling to resemble a table, row and cells.

<div class="ftable">
  <div class="ftbody">
    <div class="frow">
      <div class="fcell cell0">Hello</div>
      <div class="fcell cell1">World</div>
    </div>
  </div>
</div>

Inserting a new cell does not cause the other cell divs to reflow so it's faster.

Cells are inline divs so they float left. Rows and the table / sections are regular block divs. You control width's of cells in particular columns through additional styling.

e.g.

.ftbody {overflow-y:scroll; overflow-x:hidden; height: 120px; }
.fcell { display: inline; }
.cell0 { width: 80px; }
.cell1 { width: 120px; }

This makes it easier to do things like fix header / scrollable content too since you can specify the body to be a certain height with overflow scrollbars. Site such as this might give you ideas of the layout / style you could use.

Other optimizations would be to not use widgets to represent cells if you don't need them. Widgets are most useful if you need to add event handlers etc. and if you don't then just inject snippets of text or html by the innerHtml / Text properties. It lightens the memory footprint and speeds up event handling.