Javascript 将highcharts对象传递给web worker

我正在使用highcharts库为一些PC主机构建一个实时可视化工具。使用websocket，web应用程序接收数据并更新图表（每个web应用程序、每个主机11个图表）。javascript代码位于单个文件中，这会导致浏览器在某个时间点冻结，或者只是在相当长的延迟时间内冻结

谷歌搜索之后，我读到了关于网络工作者的文章，并考虑尝试对其进行优化。所以我想出了02个javascript文件：

• 第一个（主线程）初始化UI和图表等

• 第二个（工作者）应该收听websocket并更新图表

由于图表是在主线程中创建的（因为在主线程中，我可以访问DOM并选择图表的容器），因此当我尝试将图表传输给工作线程时，我会得到如下

数据\u CLONE\u ERR

错误：

DataCloneError: The object could not be cloned.

下面是触发代码的脚本部分，正是postmessage（）部分：

var图表\u列表=[]//图表
函数初始化所有图表（主机i、l\U id、pos）{
var图i；
对于（变量i=0；i<11；i++）{
if（i<4）{
chart_i=新的高点图表。图表({
图表：{
renderTo:l_id+“_图”+i，
defaultSeriesType:“样条线”，
zoomType:'xy'，
平移：是的，
一键：“移位”
},
标题：{
文本：“”
},
图例：{
已启用：true
},
学分：{
已启用：false
},
出口：{
已启用：false
},
打印选项：{
样条曲线：{
标记：{
已启用：false
}
}
},
工具提示：{
数值小数：2，
},
xAxis：{
标题：{
文本：“”
},
键入：“日期时间”，
像素间隔：150，
最大缩放：20*1000
},
亚克斯：{
标题：{
文本：“”
},
最小填充：0.2，
最大填充：0.2，
},
系列：[{
名称：'随机数据'，
数据：[]
}]
});
}否则{
chart_i=新的高点图表。图表({
图表：{
renderTo:l_id+“_直方图”+i，
键入：“列”，
zoomType:'xy'，
平移：是的，
一键：“移位”
},
标题：{
文本：“”，
},
副标题:{
文本：“”，
},
图例：{
已启用：false
},
学分：{
已启用：false
},
出口：{
已启用：false
},
工具提示：{}，
打印选项：{
系列：{
点填充：0，
分组填充：0，
边框宽度：0.5，
}
},
xAxis：{
标题：{
文本：“”
}
},
亚克斯：{
标题：{
文本：“”
}
},
系列：[{
名称：'随机数据'，
数据：[]
}],
});
}
图表列表。推送（图表i）；
图表i={}；
}
//转职工人
toChartsWorker={“图表列表”：图表列表}；
查特斯达沃克（Tochhartsworker）；
返回图i；

}

---

到目前为止，这是我唯一的方法。你能帮我一下吗？你看到另一种方法了吗？

你能发布触发错误的代码吗？@AlejandroC。我加上去了！此处解释了更新图表更新dom时出现的错误-web worker无权访问dom。您应该使用探查器调查代码的哪一部分导致延迟，并可能分块加载图表。

var charts_list = []; //charts    
function initAllCharts(host_i, l_id, pos){
var chart_i;
for (var i = 0; i < 11; i++) {
  if (i < 4){
    chart_i = new Highcharts.Chart({
      chart: {
        renderTo: l_id + '_graph'+i,
        defaultSeriesType: 'spline',
        zoomType: 'xy',
        panning: true,
        panKey: 'shift'                                    
      },
      title: {
        text: ''
      },
      legend: {
        enabled: true
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      plotOptions: {
        spline: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        valueDecimals: 2,
      },
      xAxis: {
        title: {
          text: ''
        },
        type: 'datetime',
        tickPixelInterval: 150,
        maxZoom: 20 * 1000
      },
      yAxis: {
        title: {
          text: ''
        },
        minPadding: 0.2,
        maxPadding: 0.2,
      },
      series: [{
        name: 'Random data',
        data: []
      }]
    });
  }else{
    chart_i = new Highcharts.Chart({
      chart: {
        renderTo: l_id + '_histogram'+i,
        type: 'column',   
        zoomType: 'xy',
        panning: true,
        panKey: 'shift'
      },
      title: {
        text: '',
      },
      subtitle: {
        text: '',
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      tooltip: {},
      plotOptions: {
        series: {
          pointPadding: 0,
          groupPadding: 0,
          borderWidth: 0.5,
        }
      },
      xAxis: {
        title: {
          text: ''
        }
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      series: [{
        name: 'Random Data',
        data: []
      }],
    });
  }
  charts_list.push(chart_i);
  chart_i = {};
}
//Post to worker
toChartsWorker = {"charts_list":charts_list};
chartsDataWorker.postMessage(toChartsWorker);

return chart_i;