2011-01-24 4 views
1

J'ai une table qui n'a pas de pagination, donc tous les enregistrements doivent être affichés dans un grand flux avec scrollbar. En utilisant la table Flex pour le même.GWT - Chargement de grandes tables lent sur IE7/8

Firefox n'a pas de gros problèmes lors du chargement de la page, il charge 7000 enregistrements en environ 90 secondes. Mais IE se bloque simplement avec 800 enregistrements!

Notre architecte technique recommande d'utiliser widget widget avec innerhtml au lieu de widgets à part entière.

Répondre

2

La grille et le tableau FlexTable de GWT sont dérivés d'un tableau HTML standard. Fondamentalement, chaque fois que vous insérez une ligne de table, IE essaie de refaire la totalité de la table, donc plus la table est longue, plus la refusion prend de temps. La performance est donc terrible dans les grandes grilles.

Vous feriez mieux d'utiliser les éléments div et le style pour ressembler à une table, une rangée et des cellules. L'insertion d'une nouvelle cellule n'entraîne pas la redistribution des autres cellules, ce qui accélère le processus.

Les cellules sont des divs en ligne qui flottent à gauche. Les lignes et la ou les sections sont des divs réguliers. Vous contrôlez la largeur des cellules dans des colonnes particulières grâce à un style supplémentaire.

par exemple.

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

Cela rend plus facile de faire des choses comme en-tête fixe/contenu scrollable trop puisque vous pouvez spécifier le corps à une certaine hauteur avec des barres de défilement de trop-plein. Un site tel que this peut vous donner des idées sur la mise en page/le style que vous pourriez utiliser.

D'autres optimisations consisteraient à ne pas utiliser de widgets pour représenter des cellules si vous n'en avez pas besoin. Les widgets sont plus utiles si vous avez besoin d'ajouter des gestionnaires d'événements, etc. Si ce n'est pas le cas, injectez simplement des extraits de texte ou html par les propriétés innerHtml/Text. Il allège l'empreinte de la mémoire et accélère la gestion des événements.