页面中使用了大量的Echarts 图例，当操作页面时间久了后发现浏览器占用电脑CPU达到了30%，而电脑的配置是服务器级别的配置，这让人觉得奇怪。
使用chrome的profile调试工具记录了js脚本的cpu占用情况，定位到echarts的一个函数占用了大量的CPU，这个函数是：
return setInterval(function () {
addShapeHandle(background);
for (var i = 0; i < n; i++) {
var style = shapeList[i].highlightStyle;
if (style.y - shapeList[i].animationY + style.r <= 0) {
shapeList[i].highlightStyle.y = canvasHeight + style.r;
shapeList[i].highlightStyle.x = Math.ceil(Math.random() * canvasWidth);
}
shapeList[i].highlightStyle.y -= shapeList[i].animationY;
addShapeHandle(shapeList[i]);
}
addShapeHandle(textShape);
refreshHandle();
}, effectOption.timeInterval);
每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，问题在于使用react 框架，页面切换后，echarts图例是销毁了，但是这个echarts的实例还在内存当中，同时它的气泡渲染定时器还在运行。这感觉也算是一个坑吧！特别是应用到react这种框架下面，这个气泡渲染函数应该检测页面中的echarts元素是否存在，不存在应该中断该定时器。
---------------------
作者：zjw0742
来源：CSDN
原文：https://blog.csdn.net/zjw0742/article/details/54315097
版权声明：本文为博主原创文章，转载请附上博文链接！
有话要说