Rendering latency with a large number of components

This issue has been tracked since 2022-09-12.

Which @angular/* package(s) are the source of the bug?

common, core, platform-browser-dynamic, platform-browser, zone.js

Is this a regression?

No

Description

We are developing an Angular application using angular 12, we have the need to render a large number of components (more than 300 components) dynamically at one and the same time.
Knowing that we are using the ViewContainerRef.createComponent method to create the component and the ChangeDetectionStrategy.OnPush as the change detection strategy for the whole application (main page and components)
During the development phase (on Dev machine ), the rendering time of all components took from 1 to 2 seconds. but when we tested it on another machine (with lower characteristics ) the rendering time took from 6 to 8s which is unacceptable for the client's requirements.
Furthermore, we tried the same test with another product using ReactJS, in the same machine and with the same number of components ,the rendering time took only 1 second.

Could you please advice?

Dev machine :
OS : Windows 10 Enterprise
RAM : 16GB
CPU : Intel(R) Core(TM) i7-7700 CPU @3.60GHz
GPU: Intel(R) HD Graphics 630
DISK: SSD NVMe

Test machine :
OS : Windows server 2012
RAM : 16GB
CPU : Intel(R) Xeon(R) CPU E5-2620 @2.00 GHz
GPU: No GPU
DISK: HHD

Browsers :

  • Google chrome
  • FireFox

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 12.2.6
Node: 16.13.0  
Package Manager: npm 8.1.3
OS: win32 x64

Anything else?

No response

JoostK wrote this answer on 2022-09-12

Could you please share a runnable reproduction that showcases this situation; it's otherwise unactionable to us as it's unclear where any bottlenecks may occur.

jessicajaniuk wrote this answer on 2022-09-21

Without a reproduction, this isn't actionable for us.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84091
Watcher Count 3064
Fork Count 22233
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date