Skip to content
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

Performance issues in 7.0.2 #330

Closed
tmtron opened this issue Nov 2, 2021 · 2 comments
Closed

Performance issues in 7.0.2 #330

tmtron opened this issue Nov 2, 2021 · 2 comments

Comments

@tmtron
Copy link
Contributor

tmtron commented Nov 2, 2021

It seems that version 7 introduced some performance issues.

Here are 2 Stackblitz examples - both have Ivy enabled and use the same code, only the dependencies are different:

  1. Stackblitz example ngx-echarts 6
    • ngx-echarts 6.0.1
    • resize-observer-polyfill: 1.5.1
  2. Stackblitz example ngx-echarts 7
    • ngx-echarts 7.0.2
    • @juggle/resize-observer: 3.3.1

I've added a dirty-check component to the project that can display the number of checks directly (I've copied this component from this repository of this code).

You can see that the change detection in version 7 is constantly running - in version 6 it's okay.

To double check, that this is not introduced by the dirty-check component itself, I disabled the dirty check-component (i.e. remove the <dirty-check> tag from the app.component.html template and instead check the change-detection in the angular dev-tools.
To do this:

  1. make sure, that you have installed the angular-dev-tools Chrome extension
  2. in Stackblitz click on Open in New Window
  3. in the new Windows press F12 to open chrome dev-tools
  4. go to the Angular Tab
  5. switch from the Components to the Profiler tab
  6. click the start recording button (at the left-top)
  7. in the ngx-echarts demo window, click the Get Data button and move the mouse over the chart

Now, the change-detection is not constantly running (so the dirty-check component has some effect on that) - but we can still see that version 7 causes a lot more changes than version 6.

Here's a profiler screenshot of version 6:
2021-11-02_16h26_06

  • it shows 0/78 after clicking the Get Data button - moving the mouse over the chart or the button does not increase the count
  • in comparison: in version 7 clicking the the Get Data button increases the count by about 150 and it increases whenever we move the mouse

In this small example, the additional change detection does not make a difference, but in a larger app - and maybe on a smartphone - this has a severe impact.
Tested in Goolge Chrome Version 95.0.4638.54 (64-Bit)

I hope this info can help to improve performance in future versions (for now we stick with version 6).

@xieziyu
Copy link
Owner

xieziyu commented Nov 8, 2021

Thanks for reporting this issue. It should be fixed in v8.0.0 and v7.1.0

@xieziyu xieziyu closed this as completed Nov 8, 2021
@tmtron
Copy link
Contributor Author

tmtron commented Nov 8, 2021

looks good in 7.1.0 (Stackblitz) - thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants