Question

我正在编写一个webapp（仅与Firefox兼容），它使用长轮询（通过jQuery的ajax功能）从服务器向客户端发送或多或少的持续更新。我很关心长时间运行这种运行的影响，比如说，整天或整夜。基本代码框架是这样的：

function processResults(xml)
{
    // do stuff with the xml from the server
}

function fetch()
{
    setTimeout(function ()
    {
        $.ajax({
            type: 'GET',
            url: 'foo/bar/baz',
            dataType: 'xml',
            success: function (xml)
            {
                processResults(xml);
                fetch();
            },
            error: function (xhr, type, exception)
            {
                if (xhr.status === 0)
                {
                console.log('XMLHttpRequest cancelled');
                }
                else
                {
                    console.debug(xhr);
                    fetch();
                }
            }
        });
    }, 500);
}

（半秒“睡眠”是这样的，如果更新快速返回到客户端，客户端不会敲击服务器 - 这通常是他们的。）

在一夜之间离开之后，它往往会让Firefox爬行。我一直在想这可能部分是由于堆栈深度很大，因为我基本上编写了一个无限递归函数。但是，如果我使用Firebug并向fetch抛出一个断点，看起来情况并非如此。 Firebug向我展示的堆栈只有大约4或5帧，即使在一小时后也是如此。

我正在考虑的一个解决方案是将递归函数更改为迭代函数，但我无法弄清楚如何在不旋转的情况下在Ajax请求之间插入延迟。我看了JS 1.7 "yield" keyword，但我不能完全围绕它，弄清楚这是否是我需要的。

最好的解决方案是定期对页面进行硬刷新，比如每小时一次吗？是否有更好/更精简的长轮询设计模式即使在运行8或12小时后也不会对浏览器造成伤害？或者我应该完全跳过长轮询并使用不同的“持续更新”模式，因为我通常知道服务器对我的响应频率是多少？

Answer 1

我怀疑内存正在从processResults()泄漏。

我在长轮询的Web应用程序中使用了非常相似的代码，它可以在没有页面刷新的情况下连续运行数周。

您的堆栈不应该很深，因为fetch()会立即返回。你没有无限递归循环。

您可能希望使用Firefox Leak Monitor Add-on来帮助您查找内存泄漏。

Answer 2

它也可能是FireBug。你是console.logging的东西，这意味着你可能打开了一个网络监视器选项卡等，这意味着每个请求都存储在内存中。

尝试禁用它，看看是否有帮助。

Answer 3

4-5的堆栈深度是正确的。 setTimeout和$.ajax是异步调用，会立即返回。稍后，浏览器会使用空调用堆栈调用回调。由于无法以同步方式实现长轮询，因此必须使用此递归方法。没有办法让它迭代。

我怀疑这种减速的原因是你的代码有内存泄漏。泄密可能是jQuery（非常不可能）$.ajax或processResults来电。

Answer 4

从方法本身内部调用fetch()是个坏主意。如果您希望在某个时刻该方法将结束并且结果将开始发送给调用者，则可以更好地使用递归。问题是，当你以递归方式调用该方法时，它会使调用方法保持打开并使用内存。如果你只有3-4帧深，这是因为jQuery或浏览器以某种方式＆＃34;修复＆＃34;你做了什么。

最近发布的jquery默认支持长轮询。通过这种方式，您可以确保yhou不会依赖浏览器的智能来处理您的无限递归调用。调用$.ajax()方法时，您可以使用下面的代码进行长轮询，并在新呼叫之前安全等待500毫秒。

function myLongPoll(){
    setTimeout(function(){
        $.ajax({
            type:'POST',
            dataType: 'JSON',
            url: 'http://my.domain.com/action',
            data: {},
            cache: false,
            success:function(data){

                //do something with the result

            },
            complete: myLongPoll, 
            async : false,
            timeout: 5000
        });
   //Doesn't matter how long it took the ajax call, 1 milisec or 
   //5 seconds (timeout), the next call will only happen after 2 seconds
   }, 2000);

通过这种方式，您可以确保在下一个呼叫开始之前关闭$.ajax()呼叫。这可以通过在console.log()来电之后添加一个简单的$.ajax()和另一个{{1}}来证明。

改善长轮询Ajax性能

4 个答案: