Блог

У нас есть простая HTML-таблица с комбинацией tr td . В таблице 65 столбцов, и в ней будет минимум 1000 строк, а может быть и больше.

Мы наблюдаем огромную проблему с производительностью при установке флажка в строке, требуется около 3-4 секунд, чтобы установить флажок и отобразить его как установленный. Мы использовали Angular CDK virtualScroll, и это значительно улучшило производительность. Но все же мы видим проблему, как упоминалось.

В чем может быть причина проблемы? Нормально ли видеть эту проблему с производительностью при таком количестве записей или может быть какая-либо проблема с дизайном, которая могла бы вызвать эту проблему?

Ну, у меня тоже были те же требования, и я столкнулся с той же проблемой с производительностью. И есть несколько моментов, которые мне помогли, во-первых, в качестве дополнительного примечания, производительность будет низкой в режиме разработки по сравнению с производственным режимом. Попробуйте реализовать стратегию обнаружения изменений в OnPush. Загружайте данные порциями, скажем, по 20-30 элементов. Реализуйте функцию angular trackBy вместе с директивой ngFor. Надеюсь, это поможет вам! Как и у меня.

Проблема была решена с помощью технологии виртуальной прокрутки Angular material. https://material.angular.io/cdk/scrolling/overview