5

我正在开发一个 .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)

     }
   }
}
4

2 回答 2

5

您尚未发布任何代码片段以供检查，因此我的回答是基于创建此类“轮询”函数时经常出现的错误。我还假设您是手动执行操作，而不使用 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 编写脉冲线来显示实时（好的，1 秒的伪实时）图形时。在我的例子中，好的部分是 API 非常快，延迟超低，我收到的数据只是一个浮点数，我用它做的 dom 操作的时空复杂度可以忽略不计。

我在这里担心的是，如果服务器在两秒内没有响应，或者如果它接近两秒，那么你有一段复杂的代码已经在这两秒间隔的重要毫秒内吃掉了。dom可能不会每两秒更新一次！

  1. 卫生提示：去掉 window.setInterval("refresh()", 2000). 应该只是 window.setInterval(refresh, 2000)原因在这里：javascript setInterval 的内存泄漏

  2. 因此，根据代码，$.post 肯定会每两秒创建一次新的 XHR 对象。实际上，服务器响应时间是什么样的？setInterval 循环多少次？对于低计数，例如响应时间低于 10 秒，新的 XHR 不应该是“THE”问题。

  3. 500 行 XML 解析？每个间隔？对我来说听起来很痛苦。您是否可以在服务器上将 XML 标记为 JSON 字符串，并将该字符串返回给 UI？它肯定会节省客户端 CPU 周期。

11000 行的 HTML。所以这是很多 dom 遍历和操作。这是一个小清单：

  1. 你在使用最好的选择器吗？（您的 xpath 表达式的特殊性）。Shizzle 已经为您提供了保障，但请尽您所能。$('p *') 之类的东西可能会造成严重破坏。

  2. 您是否已最小化文档重排？

  3. 循环：在数组上使用 for 或映射函数是最好的（最有效的）

  4. 属性访问：您是否减少了重复的嵌套属性访问，并使用一次性引用来提高效率？

  5. 附加/操作效率：例如：您是否附加单个列表项？理想情况下，您应该一次性追加整个列表块。删除等也是如此。基本上，一次性操作而不是重复操作。

如果不了解用例的底层意图和机制，很难确定这一点。

于 2012-07-14T18:35:58.783 回答
1

最后，我已经解决了这个问题。总体而言，主要修复是将响应服务器更改为 JSON。我已将响应减少到 4KB。

此外，我更准确地操作 html 元素并将其附加到 DOM。

现在，webapp 可以运行几个小时，一切正常。

于 2012-07-26T08:29:52.613 回答