Как ускорить рендеринг в браузере для больших объемов данных, используя Angular?

Question

Хорошо, у меня есть около 20 тыс. Записей и 29 столбцов текстовых данных, которые я извлекаю из серверной части в приложение Angular.

, как только получаю данные с сервера (занимает около 1s) Я связываю его с полем в компоненте, а затем использую таблицу HTML в сочетании с * ngFor для отображения всех данных.

Chrome занимает около 58 секунд, чтобы отобразить все в одном go а время написания сценариев составляет около 10 с.

моей компании очень важно иметь возможность видеть результаты на странице менее чем через 2,5 с с момента нажатия на ссылку на компонент без с использованием нумерации страниц или бесконечной прокрутки.

Какие у меня есть варианты для достижения такой производительности?

Answer 1

Трудно сказать с ограниченными знаниями о приложении и модели, но я вижу 2 варианта (вы можете go для одного или обоих):

• отложенная загрузка содержимого таблицы с разбивкой по страницам. Я не знаю, какую (если есть) структуру пользовательского интерфейса вы используете, но вы можете проверить, как она обрабатывается в NgPrime, например Ленивая таблица

РЕДАКТИРОВАТЬ: это может быть реализовано несколькими способами: во-первых: если бэкэнд является проблемой (не в этом случае), вы можете запросить только часть данных из бэкэнда и обработать их с помощью некоторой библиотеки, такой как NgPrime; во-вторых: если вы не используете какую-либо инфраструктуру, вы можете использовать что-то вроде виртуальной прокрутки Виртуальная прокрутка

• уменьшенная модель, отправляемая через бэкэнд. Если большая коллекция объектов содержит несколько вложенных объектов в качестве реквизита, это может значительно замедлить как загрузку, так и рендеринг. Вместо того, чтобы иметь вложенный объект, вы можете решить, действительно ли вам нужны все передаваемые данные, и вместо этого создать какой-нибудь легкий объект.

Также проверьте инструменты разработки и проанализируйте производительность загрузки, чтобы получить больше информации: Найти узкие места в chrome dev tools

РЕДАКТИРОВАТЬ: С большим количеством данных, предоставленных из комментариев, я бы использовал виртуальную прокрутку или аналогичный механизм (он загружает и отображает html динамически).