jQuery - Internet Explorer内存泄漏 [英] jQuery - Internet Explorer memory leaks

问题描述

我正在开发一个内部网络应用程序，用于我工作的服务台，旨在全天候在房间内的大型电视上运行，为接听电话的人显示相关数据。我们在Windows 7上使用 Internet Explorer 8 （公司安全策略不允许任何其他浏览器）和 jQuery 1.6.2 。所有脚本和数据都存储在局域网中 - 没有任何内容从互联网上传出。

基本上，应用程序查询多个XML文件（由服务器脚本生成）以显示当前信息as：

• 每个呼叫队列的统计数据，例如等待的呼叫数（每5秒重新加载）


• 当前公告（使用 jQuery循环以幻灯片形式显示，在结束时重新加载当前的公告列表）

在我的Firefox和Chrome等测试中，一切都运行得很好。但是在Internet Explorer中，如果页面一次打开超过10分钟左右，整个浏览器就会开始冻结并崩溃。

我是对javascript / jQuery内存泄漏进行了一些研究，虽然我发现了一些有趣的文章，但大多数都与在jQuery中创建或删除元素时发生的泄漏有关 - 这是我不做的事情。 / p>

我实际工作的方式是：

1. 从脚本加载XML


2. 遍历每组元素（例如，调用队列），然后将相关的子元素分配给变量。


3. 使用这些变量组合一个简单的HTML字符串（使用数组，我读到构建字符串的方式比使用连接构建字符串更节省内存，例如 string = string +'blarg'; ）


4. HTML直接输出到等待容器< div> ，替换之前的内容。

整个事情看起来像

  $。get（'dashboard-queues.asp'，function（data）{
 var allQueues = new Array（）; 
 $（data ）.find（'queue'）。each（function（）{
 var thisQueue = new Array（）; //用于为此队列构建HTML字符串的数组
 
 var callsWaiting = parseFloat （$（this）.find（'waiting'）。text（））; 
 var activeCalls = parseFloat（$（this）.find（'active'）。text（））; 
 
 //（等等......）
 
 thisQueue.push（< div class ='q-item'>+ callsWaiting +< / div>）; 
 thisQueue.push（< div class ='q-item'>+ activeCalls +< / div>）; 
 
 //（等等......）
 
 allQueues.push（thisQueue.join（''））; 
}）; 
 
 $（＃callboard）。html（allQueues.join（''））; 
}）; 
  

在那里有一些额外的处理，它改变了为某条数据输出的html代码情况（例如，如果有太多的电话等待）。此外，我在输出HTML后进行一些处理 - 计算总共等待的呼叫数量，当天的呼叫放弃率等 - 但这都是简单的计算。

我每次循环时都非常小心地重置变量和数组，以确保它们不会保留数据。似乎没有多大帮助。

如果需要，我可以发布更多实际代码（不想让这篇文章过于庞大而开始）。任何人都可以看到我可能遇到的问题吗？如果有人能提出更有效或更好的方法来做我想做的事情，那也是最受欢迎的。

干杯：）

解决方案

如果您可以访问IE9，可以尝试按F12，然后选择探查器选项卡。我意识到你的要求是针对IE8而不是9，但这可能至少可以帮助你分析问题可能存在于大型匿名的性能不佳的方面。

看看你的代码，我不确定主要的 $。get 是否可以作为一个闭包。我相当肯定JQuery正确地处理了闭包并且垃圾收集得当，但是在这种情况下IE8可能没有按预期工作..？

对间接非道歉 - 祝你好运！祝你好运！

这 comment 似乎可能有一些相关性，因为你正在处理DOM操作和事件处理。

I'm developing an internal web application for use on the helpdesk on which I work, designed to be run fullscreen, all the time, on large TVs around the room, displaying relevant data for the guys taking calls. We're using Internet Explorer 8 on Windows 7 (company security policy doesn't allow for any other browser) and jQuery 1.6.2. All the scripts and data are stored on the LAN - nothing's coming off the internet.

Essentially the application queries several XML files (generated by server scripts) to display current information such as:

• statistics for each call queue such as the number of calls waiting (reloaded every 5 seconds)
• current announcements (displayed in a slideshow format using jQuery cycle, reloaded when it gets to the end of the current list of announcements)

In my testing in Firefox and Chrome etc, everything works beautifully. But in Internet Explorer, if the page is left open for more than 10 minutes or so at a time, the whole browser starts to freeze up and crash.

I've done a fair bit of research into javascript/jQuery memory leaks, and while I've found a few interesting articles, most of them have to do with leaks that occur when creating or removing elements in jQuery - something I'm not doing.

The way I'm essentially working is:

1. Load XML from script
2. Iterate through each of a set of elements (eg, call queues), then assign relevant child elements to variables.
3. Use those variables to put together a simple HTML string (using an array, I read that building strings that way is more memory efficient than building up a string using concatenation eg string = string + 'blarg';)
4. HTML is output straight into the waiting container <div>, replacing whatever was in it before.

The whole thing looks something like

$.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(''));
});

There's a bit of extra processing in there which changes the html code outputted for that piece of data in certain circumstances (eg to if there are too many calls waiting). Additionally, I do a little bit of processing after outputting the HTML - figuring out how many calls are waiting in total, the call abandon rate for the day etc - but that's all simple calculations.

I've been pretty careful to reset variables and arrays each time we loop through to make sure they're not retaining data. Doesn't seem to have helped much.

I can post more actual code if need be (didn't want to make this post too gigantic to start with). Can anyone see where I might be running in to any problems? If anyone can suggest more efficient or better ways of doing what I'm trying to do, that would be most welcome also.

Cheers :)

解决方案

If you have access to IE9 you could try hitting F12 and then select the profiler tab. I realise your requirement is for IE8 not 9, but this might at least help you profile where the problem may lie in terms of large anonymous chunks of poor performance.

Looking at your code, I'm not sure if perhaps the main $.get would be acting as a closure. I'm fairly certain JQuery deals with closures properly and garbage collects properly, but maybe IE8 isn't working as expected in this instance..?

apologies for the indirect non-answer... Good luck!

This comment seems like it may be of some relevance since you're dealing with DOM manipulation and event handling.

这篇关于jQuery - Internet Explorer内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！