уф.... прошел месяц спустя моих вопросов по улучшению перформанса mat-table таблицы. Хочу сказать еще раз большое спасибо
@danilgudz @th1th2 @vokilam @rocked4 @Kolianich1996 под катом отчет кому интересно))))
спустя несколько итераций партизанского рефакторинга было сделано следующее:
- удалены все пайпы из темплейт, их задачи вынесены - вся калькуляция и форматирование в
ts
в сервис по совету
@Kolianich1996- сделан маппинг темплейт для ячейки по совету
@danilgudz который рили был бомбезной идеей))
- убран
ngSwitch
во всех местах, в ts обьект маппинг для исключения итерирования
- все абсолютно компоненты в
OnPush
=========
результаты))))
матириал таблица стала таки загружаться быстрее на 200 айтемах, с 3.5 - 8сек сек теперь 1.5 - 2.5 сек на самом тяжелом отображении. на остальных так то летает - ничего на заметно. НО:
1) фриз предзагрузки таблицы все равно присутствует - наверное ребята разрабы в матириал таблице при сборке ячеек - их таки впиливают туда без учета RAF, и гдето фризят рендеринг того же mat-tab-ink анимации))) а также, насколько я предполагаю, у них (команды гугл занимающейся таблицей) обьект
MatDataSource
"не вставляется единожды" в DOM как
ViewContainerRef
типа через
for
, что в принципе было бы наверное правильно, но проверить точно я не могу, так что тут моя експертиза начинает шататься)))
иследуя этот идиотизм, могу сказать, что когда матириал таблица пытается с 10 различными колонками отрендерить 200 строк, что приводит к рендерингу итерируемых 1400 ячеек - фактически пришел к выводу, что самое идеальное решение, не просто вынести калькуляцию к примеру, и выбор темплейты ячейки судя из типа колонки, но вообще кардинально поменять подход - генерировать темплейты в ts засовывая их вручную своим
for
в виртуальный контейнер
ViewContainerRef
, и потом аппендить его одним махом в нужную контейнер-темплейту, чем убрать лишний скриптинг в самой таблице. но не нашел - куда именно одним махом потом воткнуть этот ViewContainerRef в сам DataSource. уткнувшись в лимиты
mat-table
- думаю теперь, стоит ли писать свою таблицу, где смогу одним движением вставлять в DOM все 1400+ ячеек х10 быстрее изза сбора их в ts, или оставаться при том результате что есть...
если вдруг у кого есть идеи или мысли - буду рад пообщаться))