性能监控与优化

性能监控的必要性

现代Web应用复杂度不断提升，性能问题直接影响用户体验。ECharts作为数据可视化工具，在大数据量场景下尤其需要关注渲染性能。通过监控关键指标，可以及时发现并解决卡顿、内存泄漏等问题。

关键性能指标

1. 首次渲染时间

衡量图表从初始化到完成绘制的时间。可通过performanceAPI获取精确数据：

const start = performance.now();
myChart.setOption(option);
const end = performance.now();
console.log(`首次渲染耗时: ${end - start}ms`);

2. 帧率(FPS)

使用requestAnimationFrame监控渲染帧率：

let lastTime = performance.now();
let frameCount = 0;

function checkFPS() {
  const now = performance.now();
  frameCount++;
  if (now > lastTime + 1000) {
    const fps = Math.round((frameCount * 1000) / (now - lastTime));
    console.log(`当前FPS: ${fps}`);
    frameCount = 0;
    lastTime = now;
  }
  requestAnimationFrame(checkFPS);
}
checkFPS();

3. 内存占用

通过window.performance.memory(Chrome)获取内存数据：

setInterval(() => {
  if (window.performance && performance.memory) {
    console.log(`已使用堆大小: ${performance.memory.usedJSHeapSize / 1024 / 1024}MB`);
  }
}, 5000);

常见性能问题及优化

大数据量渲染卡顿

当数据点超过1万时，默认渲染方式会出现明显卡顿。解决方案：

1. 使用采样降低数据量
2. 启用渐进渲染

option = {
  series: [{
    type: 'line',
    progressive: 1000,  // 每次渲染1000个点
    progressiveThreshold: 5000  // 数据量超过5000时启用渐进渲染
  }]
};

动画性能优化

复杂动画可能导致帧率下降，建议：

1. 减少同时进行的动画数量
2. 使用更简单的缓动函数
3. 关闭不必要的动画

option = {
  animationDuration: 1000,  // 适当减少动画时长
  animationEasing: 'linear'  // 使用性能更好的缓动
};

内存泄漏处理

常见内存泄漏场景：

1. 未销毁的图表实例
2. 未移除的事件监听器

正确做法：

// 销毁图表
function destroyChart() {
  myChart.dispose();
  myChart = null;
}

// 事件监听器管理
const handler = function() { /*...*/ };
myChart.on('click', handler);

// 移除时
myChart.off('click', handler);

高级优化技巧

WebWorker数据处理

将数据计算移至WebWorker：

// main.js
const worker = new Worker('data-worker.js');
worker.postMessage(rawData);
worker.onmessage = function(e) {
  myChart.setOption({
    series: [{
      data: e.data
    }]
  });
};

// data-worker.js
self.onmessage = function(e) {
  const processedData = heavyCompute(e.data);
  self.postMessage(processedData);
};

Canvas渲染优化

调整渲染参数提升性能：

myChart.getZr().painter.getLayer().config = {
  motionBlur: false,  // 关闭运动模糊
  lastFrameAlpha: 0.7  // 降低重绘透明度
};

按需渲染

实现视窗内可见区域渲染：

option = {
  dataZoom: [{
    type: 'inside'
  }],
  series: [{
    type: 'line',
    large: true,  // 启用大数据模式
    largeThreshold: 2000  // 数据量阈值
  }]
};

性能监控工具集成

与Sentry集成

捕获运行时错误和性能数据：

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [new Sentry.Integrations.ECharts()],
  tracesSampleRate: 1.0
});

try {
  myChart.setOption(complexOption);
} catch (error) {
  Sentry.captureException(error);
}

自定义性能面板

构建实时监控界面：

function createPerformancePanel() {
  const panel = document.createElement('div');
  document.body.appendChild(panel);
  
  setInterval(() => {
    const fps = getCurrentFPS();
    const mem = performance.memory.usedJSHeapSize;
    panel.innerHTML = `
      FPS: ${fps}<br>
      内存: ${(mem / 1024 / 1024).toFixed(2)}MB
    `;
  }, 1000);
}

实际案例分析

股票K线图优化

处理10万条K线数据：

option = {
  dataset: {
    source: rawData,
    dimensions: ['date', 'open', 'close', 'low', 'high']
  },
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter'  // 过滤模式减少渲染数据
  }],
  series: [{
    type: 'candlestick',
    progressive: 2000,
    encode: {
      x: 'date',
      y: ['open', 'close', 'low', 'high']
    }
  }]
};

地理热力图优化

百万级数据点渲染方案：

option = {
  visualMap: {
    min: 0,
    max: 100,
    calculable: true
  },
  series: [{
    type: 'heatmap',
    coordinateSystem: 'geo',
    blurSize: 5,
    pointSize: 3,
    data: heatData,
    progressive: 10000,
    itemStyle: {
      opacity: 0.8
    }
  }]
};

持续性能监控

建立自动化监控流程：

// 性能数据上报
function reportPerformance() {
  const metrics = {
    fps: getAverageFPS(),
    renderTime: getRenderTime(),
    memory: performance.memory.usedJSHeapSize
  };
  
  fetch('/api/performance', {
    method: 'POST',
    body: JSON.stringify(metrics)
  });
}

// 定时收集数据
setInterval(reportPerformance, 60000);