鍍金池/ 問答/HTML5  HTML/ Angular5和echarts的沖突導(dǎo)致項目在瀏覽器訪問時CPU占用居高不下

Angular5和echarts的沖突導(dǎo)致項目在瀏覽器訪問時CPU占用居高不下

1.環(huán)境：

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

本人電腦：i5、8g、256G固態(tài)

2.詳細(xì)描述

(1)項目部署之后，在瀏覽器訪問項目，查看任務(wù)管理器，瀏覽器(Google,Firefox,ie,edge)CPU占用很高(30%左右)，只是訪問本項目才會有這些問題，訪問其他頁面正常，GoogleCPU占用高但是操作基本流暢，F(xiàn)irefox、ie、edge卡頓嚴(yán)重。

(2)在網(wǎng)上也找了些資料，也跟同事討論過，猜測可能是頁面復(fù)雜，邏輯處理太多，但是這些處理應(yīng)該只是在數(shù)據(jù)加載的時候才會被調(diào)用吧，但是拿到數(shù)據(jù)頁面渲染完之后，瀏覽器CPU占用仍然很高。當(dāng)切換到其他頁簽的時候，CPU就會降下來，切換到該項目的頁簽，CUP立馬飆升。

請各位大神和前輩幫忙分析一下原因，感激不盡！

回答
編輯回答
怣人

這個主要是Angular臟檢查和echart的requestAnimationFrame方法沖突的問題。echart在繪制完成圖表之后，還是會不停調(diào)用requestAnimationFrame方法，而這個方法會觸發(fā)Angular的臟檢查，造成Angular不斷的檢查DOM樹，導(dǎo)致CPU占用一直居高不下，解決辦法如下：

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

這樣可以讓charts圖表的相關(guān)方法排除在Angular的臟檢查之外。
深入探討和研究可以參考：
echarts在GitHub上的一個關(guān)于該問題的issue
segmentfault探討這個問題的一篇文章

2018年2月12日 20:08