Javascript 加载Highcharts文档（Chrome）时DOM节点数增加
我有一个网页，定期加载Highcharts图表-就像循环中的幻灯片。我的问题是，在运行了几个小时之后，Chrome浏览器（其他浏览器目前还不是选项）崩溃了，显示这个网页时出现了一个“哇，快照！出现了问题。” 使用“Chrome开发工具->时间线”，我可以看到“DOM节点数”不断增加。（还有文档数） 这是一个更大的网站的一部分，所以我不能发布代码。然而，我创建了一个页面，它以类似的方式进行操作。我使用JQuery.load（）加载图形 旋转普通HTML页面时，DOM计数不会增加（获取垃圾回收） 有人能告诉我我做错了什么吗？我可以换一种方式吗？这是Highcharts错误吗？任何关于如何解决此问题的建议都欢迎 下面是一些可以产生这种行为的代码。（很抱歉，我无法让它在JSFIDLE中工作） （在“$（document）.ready”函数中进行注释和取消注释，以便在加载方法之间进行更改） 我把这个页面放在这里：在这里你可以选择查看泄漏的Highcharts版本或标准的HTML加载非泄漏版本 “memoryleak.html”Javascript 加载Highcharts文档（Chrome）时DOM节点数增加,javascript,jquery,memory-leaks,highcharts,Javascript,Jquery,Memory Leaks,Highcharts,我有一个网页，定期加载Highcharts图表-就像循环中的幻灯片。我的问题是，在运行了几个小时之后，Chrome浏览器（其他浏览器目前还不是选项）崩溃了，显示这个网页时出现了一个“哇，快照！出现了问题。” 使用“Chrome开发工具->时间线”，我可以看到“DOM节点数”不断增加。（还有文档数） 这是一个更大的网站的一部分，所以我不能发布代码。然而，我创建了一个页面，它以类似的方式进行操作。我使用JQuery.load（）加载图形 旋转普通HTML页面时，DOM计数不会增加（获取垃圾回收） 有
函数UpdateGraphsDiv（）
{
if（typeof window.chart！=“未定义”）
{
window.chart.destroy（）；
}
$.ajaxSetup（{cache:false，async:false}）；
$（“#chartcontainer”）.load（“graph.html”）；
}
$（文档）.ready（函数（）
{
UpdateGraphsDiv（）；setInterval（UpdateGraphsDiv，5000）；//使用JQuery加载更新div中的图形
});
$（函数（）
{
$（“#container1”）。高图({
图表：{
类型：“列”
},
标题：{
文字：“月平均降雨量”
},
副标题:{
文本：'来源：WorldClimate.com'
},
xAxis：{
类别：[
“一月”，
二月,，
“三月”，
“四月”，
“五月”，
"六月",，
七月,，
"八月",，
"九月",，
“十月”，
十一月,，
“十二月”
]
},
亚克斯：{
分:0,，
标题：{
文字：“降雨量（毫米）”
}
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“{series.name}:”+
“{point.y:.1f}mm”，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名称:"东京",，
数据：[49.9,71.5,106.4129.2,144.0176.0,135.6148.51216.4194.1,95.6,54.4]
}, {
名称：'纽约'，
数据：[83.6,78.8,98.5,93.4,106.0,84.5,105.0,104.3,91.2,83.5,106.6,92.3]
}, {
名称：“伦敦”，
数据：[48.9,38.8,39.3,41.4,47.0,48.3,59.0,59.6,52.4,65.2,59.3,51.2]
}, {
名称：“柏林”，
数据：[42.4,33.2,34.5,39.7,52.6,75.5,57.4,60.4,47.6,39.1,46.8,51.1]
}]
});
});
请告诉我如何停止DOM节点的累积。如果您不需要HighCharts的动态交互部分。然后，我将使用PhantomJS Web服务器创建图表的图像。然后将图表图像加载到您的div中。这样，HighCharts lib不会消除客户端交互的负载 使用PhantomJS很容易动态创建HighCharts
如果您不需要HighCharts的动态交互部分。然后，我将使用PhantomJS Web服务器创建图表的图像。然后将图表图像加载到您的div中。这样，HighCharts lib不会消除客户端交互的负载 使用PhantomJS很容易动态创建HighCharts
按照约定，调用
chart.destroy（）jQuery.load（）左：不带图表| |右：按约定使用图表，调用
chart.destroy（）jQuery.load（）左：不带图表| |右：带图表使用
$（“| divpagediv”）.html（“”）.empty（）帮助？不幸的是，它没有改变任何东西。不过谢谢你的想法。我几乎可以肯定这不是你的代码，听起来更像是highcharts保留了对死节点的引用，而且它正在泄漏。在同一个div中重新创建图表之前，请确保你以前调用过chart.destroy（）
。谢谢你。我按照你的建议稍微修改了代码。DOM计数仍然随着每个新负载（JQuery）的增加而增加，但速度要慢得多。（2-4个DOM对象对应新加载）。我还没有用$（“#divpagediv”）.html（“”）确定泄漏的来源（例如JQuery的Highcharts？）
而不是.empty（）帮助？不幸的是，它没有改变任何东西。不过谢谢你的想法。我几乎可以肯定这不是你的代码，听起来更像是highcharts保留了对死节点的引用，在重新创建c之前，它正在泄漏
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript">
function UpdateGraphsDiv()
{
if (typeof window.chart != 'undefined')
{
window.chart.destroy();
}
$.ajaxSetup({ cache: false, async: false });
$("#chartcontainer").load("graph.html");
}
$(document).ready(function ()
{
UpdateGraphsDiv(); setInterval(UpdateGraphsDiv, 5000); //Updates graph in div using JQuery Load
});
</script>
</head>
<body>
<div id="chartcontainer"></div>
</body>
</html>
<div id='container1' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
<script type='text/javascript'>
$(function ()
{
$('#container1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style=""font-size:10px"">{point.key}</span><table>',
pointFormat: '<tr><td style=""color:{series.color};padding:0"">{series.name}: </td>' +
'<td style=""padding:0""><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
</script>
</div>