EmbeddedEnterprises / ng6-golden-layout

Golden-Layout binding for Angular 6/7/8...
BSD 3-Clause "New" or "Revised" License
60 stars 30 forks source link

performance issue #14

Open esoni88 opened 5 years ago

esoni88 commented 5 years ago

Hi All, if i open many dialogs i have a performance issue due too many change detection. Why on init in golden layout component of your lib you use this code

....

this.appref.tick = (): void => {
  for (const ar of (this.topWindow as any).__apprefs) {
    ar._zone.run(() => ar.__tick());
  }
};

in this way for a tick in child window is performed tick on other child windows and also in root. can you explain better ? thanks

esoni88 commented 5 years ago

i think it is a better solution :

public ngOnInit(): void {

const anyWin = this.topWindow as any;
if (!this.isChildWindow) {
  anyWin.__apprefs = [];
  anyWin.__injector = this.injector;
  anyWin.__rootRef = this.appref;
}

// attach the application reference to the root window, save the original 'tick' method
anyWin.__apprefs.push(this.appref);
(this.appref as any).__tick = this.appref.tick;

this.appref.tick = (): void => {
  if (!this.isChildWindow) {
    (this.appref as any).__tick();
  } else {
    (this.appref as any).__tick();
    anyWin.__rootRef._zone.run(() => anyWin.__rootRef.__tick());

  }

};

}

in this way for child window tick : in only execute tick on parent and on that window and not on all window opened

martin31821 commented 5 years ago

That's a fairly complex topic. In my use case, we have state shared between all windows, so the change detection needs to be run in all windows simultaneously.

Also note that this largely depends on your state management pattern, we use a redux-like pattern with OnPush change detection in most components, so performance isn't that much impacted for us.

Maybe a solution is to add a switch which changes this behavior between the original solution and the one you found.

martin31821 commented 5 years ago

@dario-frongillo in the latest commit, I refactored the tick procedure to be contained in a service, if you still have this problem, we might be able to add a flag changing the change detection propagation between the windows now.

esoni88 commented 5 years ago

@martin31821 Can you please link the commit change ?

martin31821 commented 5 years ago

There you go: https://github.com/EmbeddedEnterprises/ng6-golden-layout/commit/83fbd30079db6138f94eedaed5add5ed1a476ec7

martin31821 commented 4 years ago

@dario-frongillo is this still a problem or did you get around the issue?