The conflict between Angular5 and echarts causes the CPU occupation of the project to remain high during browser access. - Codes Helper - Programming Question Answer

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?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eadae7-217c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eadae7-217c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?