Javascript 性能问题高图表图&；socket.io

在过去的几天里，我一直在制作这个应用程序，它是一个实时图表。 它工作得很好，但我的问题是性能，如果我让页面打开大约一分钟，在chrome运行垃圾回收器之前，ram的使用率几乎会上升到1千兆位（！）。 我想这是因为我每次更新这个系列（我相信是每5秒）时都会重新绘制图表，但我真的不知道如何修复它。 这是我的密码：

$(document).ready(function() {
var socket = io.connect();

socket.emit('requestStockData');

Highcharts.setOptions({
global: {
  useUTC: false
}
});

chart = new Highcharts.Chart({
chart: {
  renderTo: 'container',
  defaultSeriesType: 'spline',
  events: {
    load: function() {
      var chart = this;
      loadChart(chart);
    }
  }
},
title: {
  text: ''
},
xAxis: {
  type: 'datetime',
  tickInterval: 300 * 1000
},
yAxis: {
  title: {
    text: 'Prix en €'
  }
}
});

function update(chart) {
socket.on('_sbourse', function(rawArray) {
  for (var i = 0; i < rawArray.length; i++) {
    var entry = rawArray[i];
    var id = entry.id;
    var str = entry.timestamp.toString();
    var time = str.slice(0, -3);
    var array = [
      [parseInt(time), entry.price]
    ];
    var array_to_point = [parseInt(time), entry.price];
    $.each(chart.series, function(i, v) {
      serieId = chart.series[i].options.id;
      if (serieId == id) {
        chart.series[i].addPoint([parseInt(time), entry.price], false);
      }
    });
  }
  chart.redraw(true);
 });
}

function loadChart(chart) {
  var array = {};
  socket.on('stockData', function(rawArray) {
    for (var i = 0; i < rawArray.length; i++) {
      var entry = rawArray[i];
      var id = entry.id;
      var str = entry.timestamp.toString();
      var time = str.slice(0, -3);
      var array = [
      [parseInt(time), entry.price]
      ];
      var array_to_point = [parseInt(time), entry.price];
      if (i < 18) {
        chart.addSeries({
          name: entry.name,
          id: entry.id,
          data: array
        });
      } else {
        $.each(chart.series, function(i, v) {
          serieId = chart.series[i].options.id;
          if (serieId == id) {
            chart.series[i].addPoint([parseInt(time), entry.price], false);
          }
        });
      }
    }
    chart.redraw(true);
  });
  update(chart);
 }
});

$（文档）.ready（函数（）{
var socket=io.connect（）；
emit（'requestStockData'）；
Highcharts.setOptions({
全球：{
useUTC:false
}
});
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
defaultSeriesType:“样条线”，
活动：{
加载：函数（）{
var图表=此；
负荷图；
}
}
},
标题：{
文本：“”
},
xAxis：{
键入：“日期时间”，
间隔：300*1000
},
亚克斯：{
标题：{
文字：“Prix en–2011”
}
}
});
功能更新（图表）{
socket.on（''u sbourse'，函数（数组）{
对于（var i=0；i

所以，是的，我想知道你们中是否有人已经遇到了这个问题，并成功地解决了它

---

PS：英语不是我的第一语言，所以如果有任何重大错误，我深表歉意

是的，不久前我确实遇到了同样的问题

1.使用新数据更新图表，而不是重新绘制 不要重新绘制图表，只需使用

addPoint

推送数据即可。看起来您已经在执行此操作，但请尝试删除

chart.redraw（）

调用。您可能必须使用

setextrems（）

来调整x刻度以包括新的时间戳

2.为socket.io使用后台工作程序（SharedWorker） 我在Chrome中做了很多评测（使用timeline功能），结果发现socket.io是这里的瓶颈。它不断阻塞UI线程，堆一直在增长，直到浏览器崩溃

我提出的解决方案是使用一个（不是WebWorker，因为它变为空闲并且不响应套接字连接）将socket.io连接移动到后台线程

因此，当应用程序启动时，启动一个worker，连接到套接字。然后，每当工作人员收到消息时，使用

postMessage

将其发送到您的应用程序

我看到这种方法极大地提高了性能

---

在Chrome中，您可以使用

chrome://inspect/#workers

是的，不久前我确实遇到了同样的问题

1.使用新数据更新图表，而不是重新绘制 不要重新绘制图表，只需使用

addPoint

推送数据即可。看起来您已经在执行此操作，但请尝试删除

chart.redraw（）

调用。您可能必须使用

setextrems（）

来调整x刻度以包括新的时间戳

2.为socket.io使用后台工作程序（SharedWorker） 我在Chrome中做了很多评测（使用timeline功能），结果发现socket.io是这里的瓶颈。它不断阻塞UI线程，堆一直在增长，直到浏览器崩溃

我提出的解决方案是使用一个（不是WebWorker，因为它变为空闲并且不响应套接字连接）将socket.io连接移动到后台线程

因此，当应用程序启动时，启动一个worker，连接到套接字。然后，每当工作人员收到消息时，使用

postMessage

将其发送到您的应用程序

我看到这种方法极大地提高了性能

---

在Chrome中，您可以使用

chrome://inspect/#workers

很抱歉反应太晚！我一直在尝试使用SharedWorker，由于某种原因，我无法使用importScripts导入socket.io，它告诉我importScripts未定义。你知道怎么解决吗？谢谢我正在使用webpack，所以我以前没有使用过importScripts。但是谷歌很快发现了这个类似的问题是的，我已经解决了这个问题，一切都很好！非常感谢你！很抱歉反应太晚！我一直在尝试使用SharedWorker，由于某种原因，我无法使用importScripts导入socket.io，它告诉我importScripts未定义。你知道怎么解决吗？谢谢我正在使用webpack，所以我以前没有使用过importScripts。但是谷歌很快发现了这个类似的问题是的，我已经解决了这个问题，一切都很好！非常感谢你！