使用javascript setInvertal增加了CPU的内存消耗

Question

我正在开发一个.NET Web应用程序,我必须使用javascript函数setInterval()来执行ajax请求以刷新某些页面的信息.

对于每个ajax请求,我收到大约68 KB的xml响应,我设法通过jQuery在html中进行可视化更改.我将间隔设置为2000毫秒,但我想,或者更确切地说,我需要将其减少到1000毫秒.

不幸的是,随着每个请求,CPU的内存消耗增加,这引起浏览器被阻止,并且除非他重新加载页面,否则用户不能使用它.我已经在Firefox,Internet Explorer和Chrome中对此进行了测试,但结果始终相同.如果我不做setInvertal(),问题就会消失.

此外,我一直在测试我所有的javascript变量的范围,但我没有发现任何错误,我想Javascript有一个高效的垃圾收集器来清理它们.

我希望我已经解释清楚了这个问题.有人有想法解决它吗？

修改:我正在使用jQuery框架.我的代码是:

var tim;
$(document).ready(function () {
  tim = window.setInterval("refresh()", 2000);
});

function refresh() {
   $.post("procedures.aspx", $("#formID").serializeArray(), function (data) {
     if (data != ""){
       var xml = $.parseXML(data);

       ... (read and process xml to do changes in the html)

     }
   }
}

Answer 1

您尚未发布任何代码段以供检查,因此我的答案基于创建此类"轮询"功能时通常会出现的错误.我也假设你是在手动操作,而不使用像jQuery或MooTools这样的框架.

您的问题很可能是由在每个轮询调用中创建一个新的XMLHttpRequest对象引起的,而不是在setInterval之外创建一个这样的实例,并且打开并再次使用它.

基本上,您可能正在编写如下代码:

var pollInterval = setInterval(function() {
    var xhr = new XMLHttpRequest(); //ouch, this hurts!
    xhr.open('GET', 'url', true);
    xhr.send();
    //etc.
}, 2000);

如果是这种情况,只需将XMLHttpRequestObject创建移出轮询循环,以确保您反复使用同一对象,从而防止内存泄漏(如果我可以称之为).

var xhr = new XMLHttpRequest(); //now we can re-use this!
var pollInterval = setInterval(function() {
    xhr.open('GET', 'url', true);
    xhr.send();
    //etc.
}, 2000);

同样,您尚未发布任何代码段或您可能正在使用的任何框架的详细信息.所以我建议的是基于我在检查轮询ajax代码时经常遇到的错误.希望这可以帮助.如果没有,请编辑问题并发布一些代码.

免责声明:我只使用XMLHttpRequest对象以简化,而不是供应商讨厌(或爱).你显然会使用跨浏览器请求对象实例化函数,或者更好的是一个抽象出这些血腥细节的库.
 

更新

那么,你的代码需要每两秒更新一次dom吗？只要页面加载？什么时候停止？我以为我会在某个地方看到一个clearInterval,但无论如何.

这有点尴尬.我最接近这种情况的是当我需要根据自动收录器API对脉冲线进行编码时,用于绘制实时(ok,伪实时,1s)图形.在我的情况下,好的部分是API速度极快,超低延迟,我收到的数据仅仅是浮点数,而我用它做的dom操作的时空复杂度可以忽略不计.

我担心的是,如果服务器在两秒钟内没有响应,或者它接近两秒钟,那么你就有一段复杂的代码,这些代码已经在这两秒间隔的相当长的几毫秒内完成了.dom 可能不会每两秒更新一次!

1. 卫生小贴士:摆脱报价 window.setInterval("refresh()", 2000).它应该只是 window.setInterval(refresh, 2000)原因:javascript setInterval的内存泄漏
   
   
2. 因此,根据代码,$ .post肯定会每两秒创建一个新的XHR对象.实际上,服务器响应时间是多少？setInterval循环多少次？对于低计数,例如响应时间低于10秒,新的XHR不应该是"问题".
   
   
3. 500行XML解析？每个间隔？听起来很痛苦.您是否可以将XML标记为服务器上的JSON字符串,并将此字符串返回给UI？它肯定会节省客户端CPU周期.

HTML有11000行.所以这是很多dom遍历和操纵.这是一个小清单:

1. 你使用最佳选择器吗？(xpath表达式的特殊性).Shizzle让你在那里,但尽你所能.像$('p*')这样的东西可以破坏破坏.
   
   
2. 你有最小化文件回流吗？
   
   
3. 循环:在数组上使用for或map函数是最好的(最有效的)
   
   
4. 属性访问:您是否正在减少重复的嵌套属性访问,并使用一次性引用来提高效率？
   
   
5. 追加/操纵效率:例如:您是否附加单个列表项？理想情况下,您应该一次性附加整个列表块.对于删除等也是如此.基本上,大块的一次性操作而不是重复操作.

如果不了解用例的低级意图和机制,很难确定这一点.