bad performance of ix components in angular 18.2

sire987 commented 4 days ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Unfortunately, we notice poor performance when we need to instantiate hundreds of ix elements in a view.

This problem applies to several ix-components. In particular, the ix-button, ix-icon and ix-icon-button components are too slow to be used en masse. The biggest problem is that the fps rate is close to zero, giving the user a poor experience when using the app.

As you can see in the demo below, the ix-button is significantly slower than the “normal” HTML button. In the real application, the performance when using the ix-button is more than 10 times worse compared to the HTML button.

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.5.0

Code to produce this issue.

https://stackblitz.com/edit/j8h8x4-cttvdx

danielleroux commented 4 days ago

Can you please add more insights to the topic e.g Browser version, Installed addons (browser addons e.g developer console addons) can create sometimes are strange behaviour. I tested your stackblitz here is the recording.

https://github.com/user-attachments/assets/1421eec5-094e-4d40-a2e8-3eac052da27e

sire987 commented 3 days ago

Browser version: Google Chrome Version 130.0.6723.70 DevTools: Chrome 130, Angular DevTools 1.0.18

As you can see in your screencast, the initial loading time (after the click) is particularly slower with the ix elements. The greater the number of elements, the clearer this effect becomes.

The deterioration in performance becomes even more pronounced if you switch the compiler from Webpack to Esbuild. (see screencast) Animation

siemens / ix