Can I check how often a page is re-rendering?-CodePudding

I have a component that is becoming quite a problem, it's processing and displaying a large amount of data but recently it's just become too much for a lot of users (up to 2GB's of memory and 50% CPU).

I've been doing some reading on how to improve performance and I've noticed a lot of people have mentioned a page rendering too often - specifically in single-page apps (Angular). Is there a way that I can monitor how often my page/component is rendering? This makes a bit more sense when I monitor my component through browser dev tools and it seems as I interact with the page the resources that it requires just grows and grows up to the point where the page becomes very laggy.

Any help or advice on this would be greatly appreciated.

CodePudding user response：

To investigate performance problems, use the developer tools of your browser. For instance, in Chrome's developer tools, the performance tab allows you to record and investigate what your website is doing. In particular, it will show every repaint event as well as a deep dive into any JavaScript activity.

However, the memory problem you are observing is not caused by overly frequent renders, because rendering should not use up any memory (that is, any memory used in rendering should be freed afterwards, so repeated renders have no effect on memory consumption). To investigate your memory problem, you may find the "memory" tab of the developer tools helpful.

CodePudding user response：

Sounds like you might have a memory leak. Make sure you're unsubscribing any subscribers when the component is destroyed.

That standard approach is usually to disable the automatic change detection by setting your changeDetection strategy to OnPush

    @Component({
      selector: 'big-data-thing',
      templateUrl: './big-data-thing.component.html',
      styleUrls: ['./big-data-thing.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush
    })

If your component has inputs, you can monitor how many times they change with the OnChanges hook.

Then use the change detector ref to manually trigger change detection only when you need to.

constructor(
  public readonly CD: ChangeDetectorRef,
) {}

...

this.CD.detectChanges()

Listen to your inputs and/or your own observables to know when to detect changes.

Edit

You can check how many times the change detection cycle is running with this:

Component:

public ChangeDetectionCount = 0
public get GetChangeDetectionCount() {
  return this.ChangeDetectionCount  
}

HTML:

<div>ChangeDetectionCycleCount: {{ GetChangeDetectionCount }}</div>