Angular5和echarts的冲突导致项目在浏览器访问时CPU占用居高不下

Question

1.环境：

项目：项目框架Angular5.0.0，脚手架：Angular-CLI 1.5.0，UI框架：NG-ZORRO 0.6.x。

本人电脑：i5、8g、256G固态

2.详细描述

(1)项目部署之后，在浏览器访问项目，查看任务管理器，浏览器(Google,Firefox,ie,edge)CPU占用很高(30%左右)，只是访问本项目才会有这些问题，访问其他页面正常，GoogleCPU占用高但是操作基本流畅，Firefox、ie、edge卡顿严重。

(2)在网上也找了些资料，也跟同事讨论过，猜测可能是页面复杂，逻辑处理太多，但是这些处理应该只是在数据加载的时候才会被调用吧，但是拿到数据页面渲染完之后，浏览器CPU占用仍然很高。当切换到其他页签的时候，CPU就会降下来，切换到该项目的页签，CUP立马飙升。

请各位大神和前辈帮忙分析一下原因，感激不尽！

Answer 1

这个主要是Angular脏检查和echart的requestAnimationFrame方法冲突的问题。echart在绘制完成图表之后，还是会不停调用requestAnimationFrame方法，而这个方法会触发Angular的脏检查，造成Angular不断的检查DOM树，导致CPU占用一直居高不下，解决办法如下：

---

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

---

这样可以让charts图表的相关方法排除在Angular的脏检查之外。
深入探讨和研究可以参考：
echarts在GitHub上的一个关于该问题的issue
segmentfault探讨这个问题的一篇文章