Highcharts 呈现大量数据点，显示消息“网页正在减慢您的浏览器。您想做什么？”在火狐中答案

【问题标题】：Highcharts rendering high amount of data points showing message "A webpage is slowing down your browser. What would you like to do?" in FirefoxHighcharts 呈现大量数据点，显示消息“网页正在减慢您的浏览器。您想做什么？”在火狐中
【发布时间】：2019-04-17 15:02:54
【问题描述】：

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

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

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

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

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

这是我在codesandbox 中尝试的要点。

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

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

【问题讨论】：

能否在在线代码编辑器（如代码沙盒或 stackblitz）中重现此问题？
很遗憾，我无法重现该错误。我安装了 60.0 版并在代码沙箱 here 中运行它，但我没有看到该消息出现。不过它确实冻结了一秒钟。
我注意到您以错误的方式初始化了 boost 模块。立即查看：codesandbox.io/s/o5z98km486
我不敢相信我错过了。现在非常顺利。该消息仍然显示在我的应用程序中，但至少我可以消除提升甚至可能是高图表作为瓶颈。谢谢！
不客气。我可以将此评论更改为答案，您会将其标记为正确吗？

标签： reactjs highcharts

【解决方案1】：

boost 模块必须正确初始化：

// import Boost module
import Boost from "highcharts/modules/boost";

// initialize it
Boost(Highcharts);

演示：

https://codesandbox.io/s/o5z98km486

【讨论】：