頁面中使用了大量的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元素是否存在，不存在應該中斷該定時器。