The conflict between Angular5 and echarts causes the CPU occupation of the project to remain high during browser access.

< H2 > 1. Environment: < / H2 >

Project: project framework Angular5.0.0, scaffolding: Angular-CLI 1.5.0 NG-ZORRO UI framework: 0.6.x.

personal computer: i5, 8g, 256g solid state

< H2 > 2. Detailed description < / H2 >

(1) after the deployment of the project, visit the project in the browser and view the task manager. The browser (Google,Firefox,ie,edge) CPU occupies a high percentage (about 30%). Only visiting this project will have these problems. Accessing other pages is normal. The GoogleCPU occupies high but the operation is basically smooth. Firefox, ie, and Edge stutter are serious.

(2) I have also found some information on the Internet and discussed it with colleagues. I guess that the page is complex and there are too many logical processes, but these processes should only be called when the data is loaded, but after the data page is rendered, the browser CPU usage is still very high. When you switch to another tab, CPU falls down, switches to the tab of the project, and CUP immediately soars.

I would like to ask all the great gods and seniors to help analyze the reasons. Thank you very much!

Html typescript echarts angular5
Mar.06,2021

this is mainly a conflict between Angular dirty check and echart's requestAnimationFrame method. After drawing the chart, echart will still call the requestAnimationFrame method incessantly, and this method will trigger the dirty check of Angular, causing Angular to constantly check the DOM tree, resulting in a high CPU occupancy. The solution is as follows:

< hr > 
this.ngZone.runOutsideAngular(() => {
  this.chart = echarts.init(this.root.nativeElement);
  this.chart.setOption(this.option, true);
})
< hr >

this allows the relevant methods of the charts chart to be excluded from the dirty check of the Angular.
in-depth discussion and research can refer to
echarts's issue on GitHub
codeshelper to explore this issue

Previous: How to bulk delete Google code snippets?

Next: What's the difference between when to use a component's .sync modifier and when to use a custom component's vmurmodel?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu