Highcharts 呈现大量数据点，显示消息"网页正在减慢您的浏览器速度。你想做什么？"在 Firefox 中

Question

我在 React 中使用 Highcharts，并且在 Firefox 60.0 中遇到了性能问题。

它最初可以很好地呈现一个空图表，但是每当我尝试使用数据更新它时，它都会给我消息"网页正在减慢您的浏览器速度。你想干什么？

Web 应用将始终显示从 20k 点到 100k 点的任何位置，有时显示数百万点，具体取决于用户选择的筛选器。

我已经尝试了Highcharts推荐的大多数优化。这是我初始化图表的代码：

componentDidMount() {
let myChart = Highcharts.chart('my-plot', {
chart: {
zoomType: 'xy',
marginTop: 40
},
boost: {
useGPUTranslations: true,
usePreAllocated: true
},
title: {
text: null
},
xAxis: {
events: {
afterSetExtremes: function(event) {
this.onZoom(event);
}.bind(this)
}
}
yAxis: {
type: 'datetime',
reversed: true,
events: {
afterSetExtremes: function(event) {
this.onZoom(event);
}.bind(this)
}
}
plotOptions: {
series: {
turboThreshold: 0,
events: {
legendItemClick: function(event) {
this.onLegendClick(event);
}.bind(this);
},
stickyTracking: false
},
tooltip: {
snap: 0
}
},
series: [[]]
});
this.setState({myPlot: myChart});
}

我正在使用以下方法更新数据：

componentDidUpdate(prevProps, prevState) {
if(prevProps.plotData !== this.props.plotData) {
let chart = this.state.myPlot;
while(chart.series.length) {
chart.series[0].remove(false);
}
chart.redraw();
this.props.plotData.forEach((series) => {
chart.addSeries(series, false);
}
chart.redraw();
}
}

这是我在代码沙箱中尝试的要点。

我尝试在添加序列时将重绘布尔值设置为 false，希望它不会经常冻结，并在 forEach 之后做了一个 chart.redraw()，所以它会在最后完全重绘。这是在另一篇SO或博客文章中，以帮助减少延迟，这确实有助于缩短"此网页正在减慢浏览器速度"消息出现的次数。但我希望这条信息完全消失。

当我使用其他图表库(如 Plotly)时，不会发生这种情况。但我喜欢高图表和它提供的灵活性，所以我想继续使用它。

Answer 1

升压模块必须正确初始化：

// import Boost module
import Boost from "highcharts/modules/boost";
// initialize it
Boost(Highcharts);

演示：

• https://codesandbox.io/s/o5z98km486