Производительность мат-таблицы с 30 000 строками - PullRequest
Новая
       21

Производительность мат-таблицы с 30 000 строками

2 голосов
/ 24 апреля 2019

Я использую Angular 6, Firebase и Angular Material.

У меня есть 30 000 json-объектов, хранящихся в firebase, которые я хочу загрузить их в мат-таблицу.Только я получаю гораздо меньше, чем я хочу.Я жду 30 секунд, прежде чем я смогу щелкнуть свое приложение, иногда хром вызывает ошибку ...

Все же я загружаю свои данные после нумерации страниц.

Может кто-нибудь сказать мне, если это нормально, или еслиесть стратегия для преодоления этой проблемы?Спасибо.

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

export class TableComponent implements OnInit {

    showSpinner = true;

    Data = {nom: '', finessgeo: '', cat1: '', commune: '', CP: '', departement: '', tel: ''}

    displayedColumns = ['nom', 'finessgeo', 'cat1', 'commune', 'CP', 'departement', 'tel'];

    dataSource = new MatTableDataSource();

    applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
    }

    @ViewChild(MatPaginator) paginator: MatPaginator;

    @ViewChild(MatSort) sort: MatSort;

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        return this.geoService.getGeos().subscribe(res => {
            this.dataSource.data =
                res;
            this.showSpinner = false;
        });
    }

    constructor(public authService: AuthService, private geoService:
        GeoService, private router: Router, private database: AngularFireDatabase) {
    }

    ngOnInit() {}
}

1 Ответ

3 голосов
/ 24 апреля 2019

У меня есть несколько предложений.

Первое: не загружать все 30-тысячные строки клиенту.Попробуйте использовать нумерацию на стороне сервера.Это должно все исправить.Также вы должны реализовать все свои функции фильтрации и сортировки на API.Используйте клиент только для отображения этих данных.

Если это не вариант:

  • Сортировка данных на сервере.Так скоро, как возможно.Если можете, прямо внутри запроса к базе данных.
  • Проверьте, добавляет ли ваш компонент все строки в DOM.Это займет очень много времени процессора.
  • Используйте вкладку «Быстродействие» из инструментов Chrome Dev, чтобы проверить, что занимает так много времени.И попробуйте оптимизировать его.
  • Проверьте ваш HTML-шаблон.Постарайтесь сделать строки максимально простыми.Как менее вложенные элементы, дополнительные классы и т. Д.
...