CODEWITHSUNDEEP
htmlangularperformancetypescriptgoogle-chrome
melvas
melvas

Reputation: 2356

Angular many rows grid performance in Chrome browser

I need to make a component witch contains a table with plenty of rows. All works great on small data. But if items count grows to 2000 and more it becomes lagging. Scrolling and, especially, animation becomes too slow.

I've also tried to set trackBy function for ngFor but it has no influence to performance in this case.

Please, see stackblitz example;

As you can see all works perfectly when you use 100 items, on 2000 it stars freezing and on 10,000 it is not usable.

I'm wondering what is the correct way to show grids with lot of data in Angular and how I can increase performance of such kind of pages?

Is there some example of lazy loading implementation can I do it in a way that only visible rows are present as html in DOM and all rows besides scroll are removed from DOM?

Any ideas will be appreciated.

UPDATE

I have the latest version of Chrome browser: Version 66.0.3359.181 (Official Build) (64-bit).

I've tried it of different PCs, browsers: it is freezes only in chrome (in chrome on a mac book it works much better then on PC but worse than in safari, as example).

Upvotes: 0

Views: 2142

Answers (2)

Ivica Buljević
Ivica Buljević

Reputation: 180

i know this is too late answer for you, but for future references and people searching speed improvement in large tables (i have cca. 100 x 40 cells -> icons) here is what i did:

  1. cell content moved to separate component (which renders different svg icons in colours depending on data)
  2. to both ngFor directives added 'trackBy' algorithm:

*ngFor="let row of rows; trackBy:trackByRowId" .... *ngFor="let cell of row.cells; trackBy:trackByCellId"

and those functions are like:

  trackByRowId(index, item) {
    return item.rowId;
  }

  trackByCellId(index, item) {
    return item.cellColId;
  }

My rendering time went from cca. 10-20 seconds to only 1 second (editing, moving and jumping to few days after or before...).

Upvotes: 0

dhilt
dhilt

Reputation: 20764

The correct way is to apply virtual scroll approach when the App dynamically destroys elements as they become invisible. I know two solutions for Angular:

Upvotes: 1

Related Questions