Performance monitoring and optimization

The Necessity of Performance Monitoring

The complexity of modern web applications continues to increase, and performance issues directly impact user experience. As a data visualization tool, ECharts particularly requires attention to rendering performance in scenarios involving large datasets. By monitoring key metrics, issues such as lag and memory leaks can be promptly identified and resolved.

Key Performance Metrics

1. First Render Time

Measures the time taken from chart initialization to completion of rendering. Precise data can be obtained using the performance API:

const start = performance.now();
myChart.setOption(option);
const end = performance.now();
console.log(`First render time: ${end - start}ms`);

2. Frame Rate (FPS)

Monitor rendering frame rate using 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(`Current FPS: ${fps}`);
    frameCount = 0;
    lastTime = now;
  }
  requestAnimationFrame(checkFPS);
}
checkFPS();

3. Memory Usage

Obtain memory data via window.performance.memory (Chrome):

setInterval(() => {
  if (window.performance && performance.memory) {
    console.log(`Used heap size: ${performance.memory.usedJSHeapSize / 1024 / 1024}MB`);
  }
}, 5000);

Common Performance Issues and Optimizations

Lag in Large Dataset Rendering

When data points exceed 10,000, the default rendering method will exhibit noticeable lag. Solutions:

1. Use sampling to reduce data volume
2. Enable progressive rendering

option = {
  series: [{
    type: 'line',
    progressive: 1000,  // Render 1000 points at a time
    progressiveThreshold: 5000  // Enable progressive rendering when data exceeds 5000 points
  }]
};

Animation Performance Optimization

Complex animations may cause frame rate drops. Recommendations:

1. Reduce the number of simultaneous animations
2. Use simpler easing functions
3. Disable unnecessary animations

option = {
  animationDuration: 1000,  // Appropriately reduce animation duration
  animationEasing: 'linear'  // Use more performant easing
};

Memory Leak Handling

Common memory leak scenarios:

1. Undestroyed chart instances
2. Unremoved event listeners

Best practices:

// Destroy chart
function destroyChart() {
  myChart.dispose();
  myChart = null;
}

// Event listener management
const handler = function() { /*...*/ };
myChart.on('click', handler);

// When removing
myChart.off('click', handler);

Advanced Optimization Techniques

WebWorker Data Processing

Move data computation to 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 Rendering Optimization

Adjust rendering parameters to improve performance:

myChart.getZr().painter.getLayer().config = {
  motionBlur: false,  // Disable motion blur
  lastFrameAlpha: 0.7  // Reduce repaint transparency
};

On-Demand Rendering

Implement rendering only for visible areas within the viewport:

option = {
  dataZoom: [{
    type: 'inside'
  }],
  series: [{
    type: 'line',
    large: true,  // Enable large data mode
    largeThreshold: 2000  // Data volume threshold
  }]
};

Performance Monitoring Tool Integration

Integration with Sentry

Capture runtime errors and performance data:

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);
}

Custom Performance Panel

Build a real-time monitoring interface:

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>
      Memory: ${(mem / 1024 / 1024).toFixed(2)}MB
    `;
  }, 1000);
}

Real-World Case Studies

Stock Candlestick Chart Optimization

Handling 100,000 candlestick data points:

option = {
  dataset: {
    source: rawData,
    dimensions: ['date', 'open', 'close', 'low', 'high']
  },
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter'  // Filter mode reduces rendered data
  }],
  series: [{
    type: 'candlestick',
    progressive: 2000,
    encode: {
      x: 'date',
      y: ['open', 'close', 'low', 'high']
    }
  }]
};

Geographic Heatmap Optimization

Rendering solution for millions of data points:

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
    }
  }]
};

Continuous Performance Monitoring

Establish automated monitoring processes:

// Performance data reporting
function reportPerformance() {
  const metrics = {
    fps: getAverageFPS(),
    renderTime: getRenderTime(),
    memory: performance.memory.usedJSHeapSize
  };
  
  fetch('/api/performance', {
    method: 'POST',
    body: JSON.stringify(metrics)
  });
}

// Scheduled data collection
setInterval(reportPerformance, 60000);