【发布时间】:2011-07-14 09:27:06
【问题描述】:
我正在开发一个内部 Web 应用程序,供我工作的帮助台使用,该应用程序设计为在房间周围的大型电视上始终全屏运行,为接听电话的人显示相关数据。我们在 Windows 7 上使用 Internet Explorer 8(公司安全政策不允许任何其他浏览器)和 jQuery 1.6.2。所有脚本和数据都存储在 LAN 上 - 没有任何东西来自互联网。
本质上,应用程序会查询几个 XML 文件(由服务器脚本生成)以显示当前信息,例如:
- 每个呼叫队列的统计信息,例如等待呼叫的数量(每 5 秒重新加载一次)
- 当前公告(使用jQuery cycle 以幻灯片格式显示,在到达当前公告列表的末尾时重新加载)
在我对 Firefox 和 Chrome 等的测试中,一切都很顺利。但是在 Internet Explorer 中,如果页面一次打开超过 10 分钟左右,整个浏览器就会开始冻结并崩溃。
我对 javascript/jQuery 内存泄漏进行了相当多的研究,虽然我发现了一些有趣的文章,但其中大多数都与在 jQuery 中创建或删除元素时发生的泄漏有关 - 我没做。
我的工作方式是:
- 从脚本加载 XML
- 遍历一组元素(例如,呼叫队列)中的每一个,然后将相关的子元素分配给变量。
- 使用这些变量来组合一个简单的 HTML 字符串(使用数组,我读到这种方式构建字符串比使用连接构建字符串更节省内存,例如
string = string + 'blarg';) - HTML 直接输出到等待容器
<div>,替换之前的内容。
整个东西看起来像
$.get('dashboard-queues.asp', function(data) {
var allQueues = new Array();
$(data).find('queue').each(function() {
var thisQueue = new Array(); // array used to build HTML string for this queue
var callsWaiting = parseFloat($(this).find('waiting').text());
var activeCalls = parseFloat($(this).find('active').text());
// (etc...)
thisQueue.push("<div class='q-item'>"+callsWaiting+"</div>");
thisQueue.push("<div class='q-item'>"+activeCalls+"</div>");
// (etc...)
allQueues.push(thisQueue.join(''));
});
$("#callboard").html(allQueues.join(''));
});
其中有一些额外的处理会在某些情况下更改为该数据块输出的 html 代码(例如,如果有太多的呼叫等待)。此外,我在输出 HTML 后进行了一些处理——计算总共有多少呼叫正在等待,当天的呼叫放弃率等——但这都是简单的计算。
每次循环时我都会非常小心地重置变量和数组,以确保它们没有保留数据。似乎没有多大帮助。
如果需要,我可以发布更多实际代码(不想让这篇文章太庞大而无法开始)。任何人都可以看到我可能会遇到任何问题吗?如果有人可以提出更有效或更好的方法来做我想做的事情,那也是非常受欢迎的。
干杯:)
【问题讨论】:
-
如果将
$("#callboard").html(allQueues.join(''));替换为document.getElementById('callboard').innerHTML = allQueues.join('');会发生什么?jQuery.html函数对传递给它的 HTML 进行了大量检查,不一定使用innerHTML。 -
有趣的想法,谢谢!我试试看。
-
嗨 roryf - 这似乎有帮助。我已经在后台选项卡中运行了几个小时的呼叫板,它仍然运行顺利!谢谢!
-
我认为问题在 jQuery 2.0.0 中仍然存在,我离开了我的 IE(Win8 模式)一夜之间回到了一个 12GB RAM 被吃掉的挂起会话。正如@roryf 所说,我更改为innerHTML。希望现在效果更好。 :)
标签: jquery internet-explorer memory internet-explorer-8 memory-leaks