kateviditory
commented
4 days ago Добрый день!
Спасибо, что завели задачу! Вопрос производительности таблицы действительно важен, и мы стараемся прорабатывать моменты, связанные с производительностью.
Однако всегда есть определенные технические лимиты. Например, мы используем библиотеку styled-components, которая генерирует стили в runtime, что требует определенных затрат в плане производительности. Рендеринг кастомных компонентов вместо простых строк в таблице также будет приводить к увеличению нагрузки. Все эти моменты важно учитывать. То, что у вас больше всего наблюдаются зависания при переключении табов, вполне объяснимо. По сути это кейс с самой большой нагрузкой на таблицу. Так как в момент переключения таба у вас происходит рендер таблицы с нуля, а значит происходит сборка мусора при удалении старой таблицы, одновременно создается огромное количество dom-элементов и генерируются новые стили в runtime для новой таблицы.
Также согласно нашему дизайну таблицу предполагается использовать для не более, чем 15-20 колонок. Плюс в случае с большим массивом строк использовать виртуальный скролл. При разработке таблицы мы не предполагали, что она будет использоваться в use case подобному вашему.
Что мы можем предложить на данный момент:
- Чтобы вносить изменения в таблицу для улучшения производительности, нужно понимать, что будет служить эталоном производительности. Поэтому попрошу вас протестировать ваш объем данных, ваши кастомные компоненты и пример с табами на обычной html table без стилизации. Нужно понять, какая в этом случае будет производительность, будут ли зависания. И уже в сравнении с этим примером думать, как можно улучшить производительность нашей таблицы
- Если ваша таблица не требует какого-то сложного функционала (н-р, drag&drop), то можно пойти путем использования html table в сочетании со стилями Адмирала. Как это сделано у нас в данном примере: https://admiralds.github.io/react-ui/?path=/docs/admiral-2-1-data-table-table--docs#table----------html-table
irdy
Добрый день!
Есть некоторые проблемы с производительностью таблицы.
Скриншот выше сделан на этом примере: https://stackblitz.com/edit/github-ytrxkt?file=src%2FApp.tsx,src%2Fdata.ts,src%2Ftabs.tsx,src%2FApp.css
Больше всего фризы в примере заметны при переключении табов. Также хочу заметить, что в примере в ячейках таблицы используются обычные строки, а в реальном приложении у нас практически всегда используются компоненты, что приводит к еще большему ухудшению производительности, и фризить начинает даже при скролле (используем макс 100 строк таблицы и в среднем 25-50 колонок)
Вот более серьезная просадка по производительности из реального апп. "Решили" пока добавлением virtual scroll-a. Лагов по несколько секунд нет, однако UI всё равно значительно подтормаживает.
Судя по логу, проблема может быть связана с observeRect.ts Также вполне допускаю, что мы как-то неправильно используем либу, если это так - будем благодарны за фидбек