-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
icons rendering performance too slow. #7825
Comments
after update stackblitz dependencies to latest, this bug appear on it, so under version 13 it works normal, but under latest 15 it slow down. |
The I tested the code locally and it takes 23 seconds for me to render after clicking "Reload". I was able to write the solution where it takes only That's not the best result. But this is x3 boost compared to 23 seconds. I had to edit the code directly: // ng-zorro-antd/fesm2020/ng-zorro-antd-icon.mjs
let scheduler = null;
class Scheduler {
constructor(ngZone) {
this.ngZone = ngZone;
this.callbacks = new Set();
this.scheduled = false;
}
schedule(callback) {
this.callbacks.add(callback);
if (this.scheduled) {
return;
}
this.scheduled = true;
requestAnimationFrame(() => {
if (this.callbacks.size !== 0) {
this.ngZone.run(() => {
for (const callback of this.callbacks.values()) {
callback();
}
this.callbacks.clear();
});
}
this.scheduled = false;
});
}
static create(ngZone) {
return scheduler || (scheduler = new Scheduler(ngZone));
}
}
class NzIconDirective extends IconDirective {
constructor(
ngZone,
changeDetectorRef,
elementRef,
iconService,
renderer,
iconPatch
) {
super(iconService, elementRef, renderer);
this.ngZone = ngZone;
// ...
this.scheduler = Scheduler.create(ngZone);
// ...
}
changeIcon2() {
this.setClassName();
this.ngZone.runOutsideAngular(() => {
from(this._changeIcon())
.pipe(takeUntil(this.destroy$))
.subscribe({
next: (svgOrRemove) => {
this.scheduler.schedule(() => {
this.changeDetectorRef.detectChanges();
if (svgOrRemove) {
this.setSVGData(svgOrRemove);
this.handleSpin(svgOrRemove);
this.handleRotate(svgOrRemove);
}
});
},
error: warn,
});
});
}
} This is the most basic scheduler implementation. In practice we should be more flexible and don't allow the scheduler to keep more than say 40-50 tasks waiting to be executed. So if |
In my app it's come to the point where I have to replace icons with words or emojis even, because the performance for icons in lists or tables is just too slow. |
Reproduction link
https://stackblitz.com/edit/ng-zorro-antd-ivy-ddpwnf?file=src/app/app.component.ts
Steps to reproduce
Press Reload button on stackblitz example.
What is expected?
Reload button freezes page abour 2-3 seconds.
What is actually happening?
Reload button freezes page about 25 seconds.
When i have table with large page size, and i have a column with icons, page rendering goes to slow. On stackblitz all works fine on default 13 version, but locally under latest versions it slow down.
The text was updated successfully, but these errors were encountered: