【发布时间】：2013-09-18 02:21:21
【问题描述】：
我有一个网页可以定期加载 Highcharts 图表 - 就像循环播放幻灯片一样。我的问题是，在 Chrome 中运行网络几个小时后（其他浏览器目前不是一个选项）会崩溃，并显示“哦，快！显示此网页时出现问题。”
使用“Chrome 开发工具->Timeline”我可以看到“DOM Node Count”不断增加。（也是文档数）。
这是更大网络的一部分，因此我无法发布代码。但是，我创建了一个以类似方式执行操作的页面。我用 JQuery.load() 加载图表。
当旋转纯 HTML 页面时，DOM 计数不会增加（被垃圾收集）。
请有人告诉我我做错了什么？我可以用不同的方式做到这一点吗？这是一个 Highcharts 错误吗？任何有关如何解决此问题的建议。
这里有一些可以产生这种行为的代码。 （对不起，我无法让它在 jsfiddle 中工作） （“$（document）.ready”函数中的注释和取消注释以在加载方法之间切换）
我已经把这个页面放在这里了：http://memoryleak.ivarragnarsson.com，您可以在其中选择查看泄漏的 Highcharts 版本或标准的 HTML 加载非泄漏版本。
“memoryleak.html”
<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>
"graph.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>
请告诉我如何阻止这种 DOM 节点的堆积。
【问题讨论】：
-
使用
$("#divpagediv").html('');代替.empty();有帮助吗？ -
不幸的是它并没有改变任何东西。不过感谢您的想法。
-
我几乎可以肯定这不是你的代码，听起来更像是 highcharts 保持对死节点的引用并且它正在泄漏
-
在同一个 div 中重新创建图表之前，请确保您之前调用过
chart.destroy()。 -
谢谢帕维尔。我按照您的建议稍微更改了代码。 DOM 计数仍然随着每次新加载（JQuery）而增加，但速度要慢得多。 （2-4 个 DOM 对象公关新加载）。我还没有确定泄漏的来源（即可能是 JQuery 的 Highcharts？）
标签： javascript jquery memory-leaks highcharts