Echarts 占用CPU高,导致浏览器卡顿问题。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zjw0742/article/details/54315097

页面中使用了大量的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元素是否存在,不存在应该中断该定时器。



展开阅读全文

没有更多推荐了,返回首页