Всем привет, есть компонент который рендарится на клиенте при нажатии

Question

Всем привет, есть компонент который рендарится на клиенте при нажатии

на определенную папку. компонент представляет из себя таблицу из 3 колонок и примерно от 1000 до 2500 рядов. ячейки представляют из себя textarea с данными которые можно редактировать. И проблема в том что при нажатии таблица появляется с довольно сильной задержкой, секунды 3. В чем может быть проблема ? ререндера там нету. А для виртуализации или инфинити скрола вроде не так много данных

#frontend #javascript #programming #react.js #russian

0

02.10.2023

12 ответов

11 просмотров

Liubomyr

Max Shabalin
2,5к записей это мало данных?

может у него мак про на m2

0

02.10.2023

Max Shabalin

Liubomyr
может у него мак про на m2

Да хоть на м5

0

02.10.2023

Максим

Девтулзы в помощь там все показано по времени какая операция занимает больше всего времени

0

02.10.2023

M S

1000 это очень мало. 0.01с навскидку. Где-то ререндеринг или архитектурно что-то не то. Есть код?

0

04.10.2023

Alexandr

M S
1000 это очень мало. 0.01с навскидку. Где-то ререн...

Откуда такая инфа? На большинстве таблиц 200+ строк - это уже виртуализация нужна как минимум, чтобы интерфейс плавно работал для юзера

0

04.10.2023

M S

Alexandr
Откуда такая инфа? На большинстве таблиц 200+ стро...

Браузер на средней машине клонирует элементы со скоростью около 10 млн элементов в секунду.

0

04.10.2023

Alexandr

M S
Браузер на средней машине клонирует элементы со ск...

Сколько таблиц без виртуализации и без пагинации на 1000+ строк у тебя написано на реакте? )

0

04.10.2023

M S

Alexandr
Сколько таблиц без виртуализации и без пагинации н...

Я не использую реакт для таблиц 1000+, изЗа его пенальти. Солид жиэс, свелт или ванила позволяют до 5000 строк со всей скоростью. Но у человека речь шла даже не о плавности. У него 3 сек тормоза на таблицах в 1-2 к рядов. Нормальное пенальти реакта 2-4 раза от нативной реализации. Все что свыше - что то не то с архитектурой.

0

04.10.2023

Alexandr

M S
Я не использую реакт для таблиц 1000+, изЗа его пе...

Не понимаю смысла таких рассуждений, когда они ломаются бональным примером в сандбоксе https://codesandbox.io/s/basic-usage-antd-5-9-4-forked-phcn5g?file=/demo.tsx Хочешь сделать анимашку в одном рендере с рендером таблицы на 1000 строк и получаешь дерганую фигню, даже без замеров в профайлере. Можно один раз навесить виртуализацию и забыть про проблемы со скоростью рендера, в подавляющем большинстве кейсов этого за глаза хватает и нет смысла упарываться в какие-то оптимизации с мемоизациями.

0

04.10.2023

Rain

Alexandr
Не понимаю смысла таких рассуждений, когда они лом...

Самое смешное, что там в таблице можно просто включить пагинацию ))

0

04.10.2023

M S

Alexandr
Не понимаю смысла таких рассуждений, когда они лом...

Вот как раз великолепный пример того, о чем я и говорил - если изменения стейта, не связанное с таблицей, вызывает полный ее ререндеринг - значит что-то не то с архитектурой. Накладываясь на неторопливость antd (при всей моей любви к нему, скоростью он не блещет) это и приводит к жутким лагам. Рендеринг с antd на стареньком ноуте - 1600 мс, чисто реактом - 400 мс, ванилой (без css) - 200 мс. Причем, в случаес ванилой, 90% рендеринга забирает рендеринг браузера а не код. Виртуализация для длинных списков это действительно хорошая практика. Но начинать нужно с тщательного продумывания архитектуры. Это вообще базовая вещь и краеугольный камень любой оптимизации.

0

05.10.2023

Max Shabalin · Accepted Answer

Max Shabalin

2,5к записей это мало данных?

0

02.10.2023

169 похожих чатов

Всем привет, есть компонент который рендарится на клиенте при нажатии

12 ответов

Похожие вопросы