使用定期 AJAX/XMLHttpRequest 调用时如何修复浏览器的内存增长? [英] How to fix browser's memory growth when using periodic AJAX/XMLHttpRequest calls?

查看:50
本文介绍了使用定期 AJAX/XMLHttpRequest 调用时如何修复浏览器的内存增长?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我花了整个周末来详细阐述我用 Dojo 编写的 Web 应用程序中的内存增长问题.

I've spent the whole weekend to elaborate the memory growth issue within my web application written in Dojo.

Web 应用程序将永远运行",因此不打算重新启动浏览器.

The web application is going to "run forever", so restarting the browser is not planned.

应用程序正在定期更新来自服务器(无跨域)的动态数据;每 5 秒,进行一次 AJAX 调用以将新数据检索为 JSON.

The application is updating dynamic data from server (no cross domain) on a regular basis; each 5 seconds, an AJAX call is made to retrieve the new data as JSON.

通过让应用运行数小时,我观察到浏览器的内存不断增长(在最新的 Chrome 和 Firefox 上,在最新的 Windows 和 Mac OS X 上).

By letting the application run for hours, I observed a constant growth in browser's memory (both on latest Chrome and Firefox, both on latest Windows and Mac OS X).

起初,我认为是 Dojo 导致了这种行为.事实上,通过使用 XMLHttpRequest 对象切换到本机实现,我可以显着减少内存增长,但它仍然存在.随着每个 AJAX 请求,内存会增加一点(大约 4-8KB).

At first, I thought Dojo was causing this behaviour. And indeed, by switching to native implementation with the XMLHttpRequest object I could reduce the memory growth dramatically, but it still exists. With each AJAX request the memory is growing a little bit (about 4-8KB).

我已经尝试过的:

我有...

  • ...尝试使用其他框架,例如 jQuery、YUI 等.- 无效
  • ...改用原生`XMLHttpRequest` 对象- 帮助很大,但不完全
  • ...在检索数据后停用 DOM 操作 - 无效
  • ...通过设置为`null`并在每次迭代后删除它来重置`xhr`-无效
  • ...在每次迭代后将 onreadystatechange 处理程序重置为 null 或空方法 - 无效
  • ...重用了 `xhr` 对象和 `onreadystatechange` 处理程序,因为它们总是相同的 - 没有效果

因此,即使我对加载的数据不做任何操作(如下面的第一个 StackOverflow 链接中所述),内存使用量也会增加:

So even if I do nothing (as also described in the first StackOverflow link below) with the loaded data, the memory usage increases:

我已经读过的:

我的测试 HTML 代码:

My test HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Native XHR Async</title>
</head>
<body>
<script>

var update = document.createElement("div");
document.body.appendChild(update);

var timeout = null;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = onReadyState;

function loadData()
{
    xhr.open("GET","memory-leak.json?" + new Date().getTime());
    xhr.send(null);
}

function onReadyState()
{
   if (this.readyState === 4)
   {
       if( this.status === 200 )
       {
           update.innerHTML = "";
           update.innerHTML = this.responseText;
       }

       if( timeout !== null )
       {
           clearTimeout(timeout);
           delete timeout;
       }

       timeout = setTimeout(loadData, 1000);
   }       
}

loadData();

</script>

</body>
</html>

和我的测试 JSON(在同一目录中):

And my test JSON (in the same directory):

{
    "errorstatus":"Okay",
    "B0":{"P":"0 Watt"},
    "E0":{"P":"28 Watt"},
    "Z0":{"P":"28 Watt"},
    "S0":{"P":"0 Watt","SOC":"74%"},
    "Z1":{"P":"0 Watt"},
    "R0":0,
    "R1":0,
    "R2":0,
    "date":"29.09.2012 09:23:19",
    "Version":"Sep 28 2012-15.22"
}

我对这个问题没有任何解释,所以非常感谢任何帮助.如果您需要有关这方面的任何进一步信息,请随时问我.

I don't have any explanation for this issue, so any help is much appreciated. If you need any further information about this, please don't hesitate to ask me.

推荐答案

XmlHttpRequest 将缓存每个响应,这就是您附加日期以使 URL 唯一的原因.

The XmlHttpRequest will cache each response which is why you're appending the date to make the URL unique.

缓存照常写入磁盘,但也将保存在 XmlHttpRequest 中,只要它存在就发出请求.

The cache is written to disk as normal, but also will be held in an XmlHttpRequest which has made a request as long as it exists.

您应该为每个请求使用一个实例并销毁它,或者确保通过编译指示和 xhr 设置禁用缓存.

You should use an instance per request and destroy it, or otherwise make sure caching is disabled via pragmas and xhr settings.

这篇关于使用定期 AJAX/XMLHttpRequest 调用时如何修复浏览器的内存增长?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆