GWT - Große Tabellen laden langsam auf IE7/8

Question

Ich habe eine Tabelle, die keine Pagination hat, daher müssen alle Datensätze in einem großen Fluss mit Scrollbar angezeigt werden. Verwenden Sie die Flex -Tabelle für dasselbe.

Firefox hat keine großen Probleme beim Laden der Seite, es wird in etwa 90 Sekunden 7000 Datensätze geladen. Aber dh hängt einfach mit 800 Platten!

Unser technischer Architekt empfiehlt, Cellentable-Widget mit Innerhtml anstelle von vollwertigen Widgets zu verwenden.

Answer 1

GWTs Gitter und Flextable werden von einem Standard -HTMLTable abgeleitet. Grundsätzlich versucht Sie jedes Mal, wenn Sie eine Tabellenzeile einfügen, dh versucht, die gesamte Tabelle zu reflowieren, so je länger die Tabelle, desto länger dauert der Reflow. Die Leistung ist daher in großen Gittern schrecklich.

Es ist vielleicht besser, Divelemente und Styling zu verwenden, um einer Tabelle, Reihe und Zellen zu ähneln.

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

Das Einfügen einer neuen Zelle führt nicht dazu, dass die anderen Zell -Divs nicht reflektieren, so dass sie schneller ist.

Zellen sind Inline -Divs, also schweben sie links. Zeilen und die Tabelle / Abschnitte sind reguläre Blockdivs. Sie kontrollieren die Breite von Zellen in bestimmten Säulen durch zusätzliches Styling.

z.B

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

Dies erleichtert es auch, auch Header- / Scroll -Inhalt zu reparieren, da Sie angeben können, dass der Körper eine bestimmte Höhe mit Überlauf -Scrollbars darstellt. Site wie Dies Könnte Ihnen Ideen des Layouts / Stils geben, den Sie verwenden könnten.

Andere Optimierungen wären, Widgets nicht zu verwenden, um Zellen darzustellen, wenn Sie sie nicht benötigen. Widgets sind am nützlichsten, wenn Sie Ereignishandler usw. hinzufügen müssen. Wenn Sie dies nicht tun, injizieren Sie nur Textausschnitte oder HTML von den InnerHTML / Text -Eigenschaften. Es erhöht den Speicher Fußabdruck und beschleunigt die Handhabung des Ereignisses.

Answer 2

Wenn Sie keine Sortieranforderungen haben, würde ich empfehlen, das neue GWT 2.1.0 -Cellentable zu verwenden, das schnell genug sein sollte:

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

(Es könnte tatsächlich mit Sortieren funktionieren, ich habe nur noch nicht herausgefunden, wie)