Angular CDK Virtual Scroll causing memory issues

66 Views Asked by At

I've the following code:

<cdk-virtual-scroll-viewport #scrollSection id="scrollSection"
                    [itemSize]="generalSettings.rowHeight"
                    [attr.data-resource-type]="'A'" [minBufferPx]="minBufferPx"
                    [maxBufferPx]="maxBufferPx"
                    [ngClass]="isScrollbarAvailable ? 'a-section-scroll' : 'a-section-no-scroll'">
                    <table #tableA id="tableA" [style.width.px]="aWidth" class="resource-grid">
                      <tbody #container>
                        <tr *cdkVirtualFor="let resource of resourcesList$ | async; let itemIndex = index; trackBy: trackItem;">
                          <app-resource [resourceData]="resource" [style.background-color]="'none'"
                            [style.width.px]="scaleOptions.width" [attr.Id]="resource.Id"
                            (taskDragStart)="onTaskDragStart($event)" (taskDragEnd)="onTaskDragEnd($event)"
                            (taskDragHover)="onTaskDragHover($event)">
                          </app-resource>
                        </tr>
                      </tbody>
                    </table>
                  </cdk-virtual-scroll-viewport>

<app-resource> component uses the ChangeDetectionStrategy.OnPush When I use the mouse wheel to scroll, it only calls the ngOnChanges for the components already rendered but when I use the mouse click to scroll, it calls both the ngOnInit and ngOnChanges because of which I'm getting a memory spike as this component is rendered thousands of times inside the virtual scroll, when the app loads the memory footprint is around 250M in chrome's Task Manager, when I do the scroll it reaches at 450M and after about 10 seconds it reduces to 350M but never to where it starts.

I've removed the input properties i.e. [resourceData] in order to see if it has any impact. I've also removed all the template code from the component i.e. resource.component.html and only placed a span element but still no luck.

What would be the best strategy I should use here to resolve the memory issues?

0

There are 0 best solutions below