一、問題：
這周開發了一個項目，需要動態加載曲線的數據，數據從右往左不斷的推進。部署測試的第二天后台就說瀏覽器崩潰了，報out of memory錯誤。
類似下面的曲線：
二、分析：
通過谷歌的開發工具進行內存和性能分析，發現內存一直上升，從幾十M一直升到2個G，電腦卡死了。
深入分析，發現構造函數里面很多新增的都是來自echarts；並且停掉echarts渲染，內存不會增加；確定是echarts動態加載的問題。
三、解決：
（1）剛開始就覺得是echarts沒有清理舊組件，所以就試了一下每次執行setOption()之前先調用clear()（執行dispose方法當然也可以），清理掉組件；這樣可以成功解決內存問題。
但是，有個問題：曲線會不斷的閃，這樣是達不到效果，客戶應該也不允許。所以就沒用這種方式。
（2）渲染方式： canvas或者svg（這個改了好像關系並不大），但據說svg在移動端效果比較好，具體可看echarts官方文檔。
（3）setOption()方法的參數問題，有的是把組件替換了，有的是把新增、融合，具體還是看官方文檔比較詳細。這一塊效果好像也不明顯。
（4）動畫的關閉，參考echarts示例，這個很有效果，改了之后內存增加不明顯了。就是tooltip里面的東西，具體為什么就不知道了，但明顯關掉動畫，這部分就釋放了內存
（5）返回的數據格式問題，這個不好說，有可能是x軸和y軸的數據組長度不一致也會產生問題，比如x軸的數組長度100，y軸的數組長度99，有一個就對不上了。
我原本數據都是給series，格式是[['xxx', 100], ['xx', 200], ....]，二維數組的形式。后來改了，xAxis的data和series的data都給了一維數組。
（4）、（5）是一起改的，這兩個是優化最有效的。
最后的優化效果是，內存大多維持在50、60左右的范圍，不會超過70M。
四、總結：
本次優化涉及到谷歌的調試分析工具的使用、echarts緩存清理、數據格式問題，對以后的開發很有幫助。我再想以前的項目是不是也有這個問題。。。。。