Calendar performance issues #1781

Closed
variable-content opened this Issue Jan 10, 2017 · 5 comments

Projects

None yet

3 participants

@variable-content

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Render speed is very slow when there are a large number (100+) of Calendar components on the page.

Expected behavior
Should be little to no lag to render.
Suggested fix is to only render of the calendar overlay when necessary (currently its rendered, but hidden with display: none;). I found that this dramatically sped up render times.

Minimal reproduction of the problem with instructions
Add this to the calendardemo.html template:
<button (click)="perfTest()">Perf Test
<div *ngIf="isPerfTest">
<p-calendar *ngFor="let i of arr" [(ngModel)]="date1">

And in the CaledarDemo component class:
export class CalendarDemo {
isPerfTest: boolean;
arr = Array(100).fill(1);
...
perfTest() {
this.isPerfTest = !this.isPerfTest;
}

Please tell us about your environment:
Windows 10

  • Angular version: 2.X.X

  • PrimeNG version: 1.1.4

  • Browser: all

@ilianiv
ilianiv commented Jan 13, 2017

Accordion component has the same issue #1808

@variable-content

PR to fix this issue is ready to be reviewed: #1817

@cagataycivici cagataycivici self-assigned this Jan 16, 2017
@cagataycivici cagataycivici added this to the 2.0 milestone Jan 16, 2017
@cagataycivici cagataycivici changed the title from Calendar performance issue to Calendar performance issues Jan 18, 2017
@cagataycivici cagataycivici added enhancement and removed review labels Jan 18, 2017
@cagataycivici
Member

Merged 1817.

@cagataycivici
Member

Also removed creation of a new date for checking if day is today to reduce memory usage. Calendar performance has been improved significantly. Thank you.

@variable-content

Awesome, thanks for taking a look!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment