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

最新推荐文章于 2024-08-10 10:46:43 发布

置顶

zjw0742

最新推荐文章于 2024-08-10 10:46:43 发布

阅读量2.6w

点赞数 1

分类专栏： ReactJs 文章标签： echart cpu 占用高 react

本文链接：https://blog.csdn.net/zjw0742/article/details/54315097

版权

本文探讨了在使用Echarts时遇到的CPU占用率过高的问题，尤其是在React框架下。通过Chrome的Profile调试工具，定位到Echarts的一个函数持续消耗大量CPU资源。问题源于即使在页面切换后，Echarts实例未被完全销毁，其定时器仍在后台运行，继续渲染气泡。解决此问题的关键在于，当Echarts元素不存在时，应当停止相关定时器的执行，以避免资源浪费和浏览器卡顿。

摘要由CSDN通过智能技术生成

页面中使用了大量的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