GWT - Большие таблицы загружаются медленно на IE7/8
-
24-10-2019 - |
Вопрос
Я получил таблицу, которая не имеет страниц, поэтому все записи должны отображаться в одном большом потоке с помощью прокрутки. Используя гибкую таблицу для того же.
У Firefox нет больших проблем при загрузке страницы, он загружает 7000 записей примерно за 90 секунд. Но т.е. просто висит с 800 записями!
Наш технический архитектор рекомендует использовать виджет CellTable с InnerHTML вместо полноценных виджетов.
Решение
Сетка GWT и Flextable получены из стандартного HTMLTable. По сути, каждый раз, когда вы вставляете строку таблицы, т.е. пытается обработать всю таблицу, чтобы, чем дольше таблица, тем дольше берет реф. Поэтому производительность ужасна в больших сетках.
Вам может быть лучше использовать элементы Div и стиль, чтобы напоминать таблицу, строки и ячейки.
<div class="ftable">
<div class="ftbody">
<div class="frow">
<div class="fcell cell0">Hello</div>
<div class="fcell cell1">World</div>
</div>
</div>
</div>
Вставка новой ячейки не заставляет другие ячейки отработать, так что это быстрее.
Клетки являются встроенными DIV, поэтому они плавают влево. Ряды и таблицы / разделы являются обычными блоками. Вы контролируете ширину ячеек в конкретных столбцах посредством дополнительного стиля.
например
.ftbody {overflow-y:scroll; overflow-x:hidden; height: 120px; }
.fcell { display: inline; }
.cell0 { width: 80px; }
.cell1 { width: 120px; }
Это облегчает выполнение таких вещей, как исправление заголовка / прокручиваемого контента, так как вы можете указать тело как определенную высоту с переполненными полосами прокрутки. Сайт, такой как это Может дать вам идеи макета / стиля, который вы могли бы использовать.
Другие оптимизации - не использовать виджеты для представления ячеек, если они вам не нужны. Виджеты наиболее полезны, если вам нужно добавлять обработчики событий и т. Д. И если вы этого не сделаете, то просто вводите фрагменты текста или HTML с помощью свойств Innerhtml / Text. Это ослабляет отслеживание памяти и ускоряет обработку событий.
Другие советы
Если у вас нет никаких требований к сортировке, я бы порекомендовал использовать новую Cellatable GWT 2.1.0, которая должна быть достаточно быстро:
(Это может на самом деле сработать со сортировкой, я просто не выяснил, как еще)