*ngFor загрузка данных занимает более 4 секунд

Question

У меня угловой 7 проект.

У меня есть одна универсальная сетка, в которой я отображаю данные на основе конфигурации.

У меня есть одна страница, на которой данные сетки имеют 200 строк и около 20 столбцов

Ниже приведен пример кода

<tr role="row" *ngFor="let objRC of filteredList | orderBy: orderFilter.orderBy : orderFilter.reverse; let idx=index; trackBy: trackByIndex;"
    [class.highlight]="objRC.highlighted">
    <td *ngIf="allowSelect">
        <div class="checkbox checkbox-success">
            <input [id]="'check'+idx" type="checkbox" [(ngModel)]="objRC.selected" (change)="changeRowSelection()">
            <label [for]="'check'+idx"></label>
        </div>
    </td>
    <td *ngFor="let objGColumn of gridColumns; let idx=index; trackBy: trackByIndex;"
        [ngSwitch]="objGColumn.type" placement="auto" [triggers]="objGColumn.popover || 'none'"
        [popover]="objRC[objGColumn.propertyKey]" [popoverTitle]="objGColumn.label | translate"
        containerClass="chiefComplaint" container="body">
        <div *ngSwitchCase="'email'" [className]="'flex align-items-center ' + (objGColumn.className || '')">
            <i *ngIf="objRC[objGColumn.propertyKey]" class="fa fa-envelope mr-1">
            </i>
            <a [href]="'mailto:'+objRC[objGColumn.propertyKey]" [textContent]="objRC[objGColumn.propertyKey]"></a>
        </div>
        ....
    </td>
</tr>

Таким образом, на основе gridColumns массива столбцы генерируются.

Проблема, с которой я сталкиваюсь, заключается в том, что после получения данных от API *ngFor занимает больше 4-5 секунд для отображения данных. Иногда это занимает даже около 10 секунд. ТАК, что генерация DOM занимает столько времени.

Это сильно влияет на производительность приложения.

Я даже попробовал обнаружение изменений. Ничто, кажется, не работает для меня.

Может кто-нибудь посоветовать мне, что решение для этого?

Answer 1

Почему вы не используете резольвер? Или загрузить данные, когда пользователь прокручивает // ngx-infinite-scroll

Answer 2

Предполагая, что разбиение на страницы не является вариантом, вам потребуется реализовать виртуальную прокрутку, если вы хотите хорошо работающее приложение, когда выполняете тяжелую работу по DOM.

Вы также можете попробовать реализовать бесконечную прокрутку, разделив нагрузку DOM на более мелкие фрагменты, но после рендеринга всех данных у вас могут возникнуть проблемы с производительностью в зависимости от размера набора данных.

В Angular 7+ вы можете использовать директиву виртуального просмотра с прокруткой из Material CDK

https://material.angular.io/cdk/scrolling/overview

Также посмотрите на ngx-datatable

https://github.com/swimlane/ngx-datatable