Highcharts每秒新增250个点调用addPoint卡顿如何优化

卡顿原因分析 #

你当前的写法每次调用addPoint时第二个参数设为true，代表每添加1个点就触发1次图表重绘，每秒执行250次重绘，同时第三个参数true代表每次添加都执行一次旧点移除操作，大量重复的重绘和计算逻辑直接导致浏览器主线程阻塞，因此出现卡顿、交互无响应的问题。

优化方案 #

方案1：优化addPoint调用逻辑 #

仅需调整参数，所有点添加完成后统一触发一次重绘，即可将每秒重绘次数从250次降到1次，解决卡顿问题：

const series = chart.series[0];
const newPoints = []; // 你生成的250个新数据点数组
const MAX_POINTS = 250 * 30; // 总保留数据点数量7500

for (let i = 0; i < newPoints.length; i++) {
  // 第二个参数设为false，添加点时不触发重绘；第三个参数控制是否移除最早的点
  series.addPoint(newPoints[i], false, series.data.length >= MAX_POINTS);
}
// 全部添加完成后统一触发一次重绘
chart.redraw();

方案2：使用setData批量更新（推荐） #

setData确实性能优于多次调用addPoint，它是一次性全量更新数据，Highcharts内部仅会做一次计算和渲染，更适合批量更新场景，实现逻辑如下：

const series = chart.series[0];
const newPoints = []; // 你生成的250个新数据点数组
const MAX_POINTS = 250 * 30; // 总保留数据点数量7500

// 拼接现有数据和新数据
let updatedData = series.options.data.concat(newPoints);
// 超出总长度时截取最后MAX_POINTS个数据，移除最早的冗余数据
if (updatedData.length > MAX_POINTS) {
  updatedData = updatedData.slice(-MAX_POINTS);
}
// 第二个参数设为true，更新完成后自动触发重绘
series.setData(updatedData, true);

额外性能优化建议 #

• 关闭序列更新动画，避免动画消耗性能，初始化图表时添加如下配置：

plotOptions: {
  series: {
    animation: false
  }
}

• 开启涡轮渲染模式，适配大数据量渲染优化，初始化图表时添加如下配置：

plotOptions: {
  series: {
    turboThreshold: 10000 // 取值大于总保留点数7500即可，设为0代表对所有数据量生效
  }
}

• 如果后续数据量进一步提升，可引入Highcharts官方boost模块，可支持十万级别的点流畅渲染。

内容的提问来源于stack exchange，提问作者qingdaojunzuo