GWT - 大表在IE7 / 8上加载缓慢 [英] GWT - Big tables load slow on IE7/8

问题描述

我得到了一张没有分页的表格，因此所有记录都需要用滚动条显示在一个大流程中。使用Flex表格也是如此。

Firefox在加载页面时没有大问题，它在大约90秒内加载7000条记录。但IE只是挂着800条记录！

我们的技术架构师建议使用celltable小部件而不是完整的小部件。

您最好使用div元素和样式来模拟表格，行和单元格。

 < div class =ftable> 
< div class =ftbody> 
< div class =frow> 
< div class =fcell cell0> Hello< / div> 
< div class =fcell cell1>全球< / div> 
< / div> 
< / div> 
< / div> 
  

插入新的单元格不会导致其他单元div重新流动，因此速度更快。

单元格是内联div，因此它们向左浮动。行和表/部分是常规的块div。您可以通过其他样式控制特定列中单元格的宽度。

例如

  .ftbody {overflow-y：scroll;溢出 -  X：隐藏; height：120px; } 
 .fcell {display：inline; } 
 .cell0 {width：80px; } 
 .cell1 {width：120px; } 
  

这样可以更轻松地完成修复标题/可滚动内容等事情，因为您可以指定正文与溢出滚动条一定高度。诸如这的网站可能会为您提供布局/样式的想法您可以使用。

如果您不需要它们，其他优化将不使用小部件来表示单元格。如果您需要添加事件处理程序等，那么小部件最有用，如果您不需要通过innerHtml / Text属性注入文本或html片段。它减轻了内存占用并加快了事件处理速度。

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.

解决方案

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.

这篇关于GWT - 大表在IE7 / 8上加载缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！