GWT - Las grandes tablas se cargan lentamente en IE7/8

Question

Obtuve una mesa que no tiene paginación, por lo tanto, todos los registros deben mostrarse en un gran flujo con barra de desplazamiento. Uso de la tabla Flex para la misma.

Firefox no tiene grandes problemas para cargar la página, carga 7000 registros en aproximadamente 90 segundos. ¡Pero es decir, simplemente cuelga con 800 discos!

Nuestro arquitecto técnico recomienda usar el widget CellTable con InnerHTML en lugar de widgets completos.

Answer 1

La cuadrícula de GWT y el umblextable se derivan de un htmltable estándar. Básicamente, cada vez que inserta una fila de tabla, es decir, intenta reflejar toda la tabla para que cuanto más tiempo sea la tabla, más tiempo lleva la reflexión. Por lo tanto, el rendimiento es terrible en grandes cuadrículas.

Es mejor usar elementos Div y estilo para parecerse a una tabla, fila y celdas.

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

Insertar una nueva celda no hace que los otros Divs de la célula se reflejen, por lo que es más rápido.

Las células son divs en línea, por lo que flotan a la izquierda. Las filas y la tabla / secciones son divs de bloque regulares. Controlas el ancho de las celdas en columnas particulares a través de un estilo adicional.

p.ej

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

Esto hace que sea más fácil hacer cosas como arreglar el encabezado / contenido desplazable también, ya que puede especificar que el cuerpo tenga cierta altura con barras de desplazamiento de desbordamiento. Sitio como este Podría darle ideas del diseño / estilo que pueda usar.

Otras optimizaciones serían no usar widgets para representar celdas si no las necesita. Los widgets son los más útiles si necesita agregar controladores de eventos, etc. y si no lo hace, solo inyecte fragmentos de texto o html por las propiedades de innerhtml / texto. Aligera la huella de memoria y acelera el manejo de eventos.

Answer 2

Si no tiene ningún requisito de clasificación, recomendaría usar el nuevo Celltable GWT 2.1.0, que debería ser lo suficientemente rápido:

http://www.jarvana.com/jarvana/view/com/google/gwt/gwtdev/2.1.0/gwtdev-2.1.0-javadoc.jar!/com/google/gwt/user/cellview /client/celltable.html

(En realidad podría funcionar con la clasificación, simplemente no he descubierto cómo todavía)