相关疑难解决方法(0)

Javascript内存泄漏:分离的DOM树

我注意到浏览器的内存在我处于一种形式时开始增加(这在任务管理器中很明显).在IE 9中,在使用一段时间后,这很容易超过500MB,而chrome则更具弹性(使用相同的测试可达到200MB).

我正在使用chrome开发人员工具来调试此问题.我注意到有大量的Detached DOM树:

独立的dom树截图

我假设这可以确认存在内存泄漏.这是对的吗?其次,我需要找出如何确定问题的根本原因.我知道您应该使用保留树来识别阻止这些物品被回收的原因.但我无法找到如何使用保留树.例如,上面屏幕截图中的保留树是什么意思?

任何帮助将不胜感激.

javascript jquery google-chrome-devtools

32
推荐指数
1
解决办法
1万
查看次数

JavaScript闭包中的内存泄漏风险

解决了

关于这个问题,网上有很多矛盾的信息.感谢@John,我设法解决了闭包(如下所示)不是内存泄漏的原因,即使在IE8中 - 它们并不像人们所说的那样普遍.事实上,我的代码中只发生了一次泄漏,事实证明并不难解决.

从现在开始,我对这个问题的回答是:
AFAIK是唯一一次IE8泄漏的时候,就是在全局对象上设置了事件/处理程序.(window.onload,window.onbeforeunload,...).要解决这个问题,请参阅下面的答案.


巨大的更新:

我现在已经完全迷失了......经过一段时间深入挖掘新旧文章,我至少留下了一个巨大的矛盾.尽管之一 JavaScript的大师的(道格拉斯·克罗克福德)说:

由于IE无法完成其工作并重新开始循环,因此我们不得不这样做.如果我们明确地打破循环,那么IE将能够回收内存.根据微软的说法,闭包是造成内存泄漏的原因.这当然是非常错误的,但它导致微软向程序员提供了关于如何应对微软错误的非常糟糕的建议.事实证明,很容易打破DOM端的循环.几乎不可能在JScript端打破它们.

正如@freakish所指出的,我的下面的代码段与jQuery的内部工作类似,我觉得我的解决方案不会导致内存泄漏.与此同时,我找到了这个MSDN页面,该部分Circular References with Closures对我特别感兴趣.下图几乎是我的代码如何工作的示意图,不是它:

带闭包的循环引用

唯一的区别是我的常识是不将我的事件监听器附加到元素本身.
所有相同的Douggie都是非常明确的:闭包不是IE中mem泄漏的根源.这个矛盾使我无法理解谁是对的.

我也发现泄漏问题在IE9中也没有完全解决(找不到链接ATM).

最后一件事:我还得知IE管理JScript引擎之外的DOM,当我<select>根据ajax请求更改元素的子元素时,这让我感到烦恼:

function changeSeason(e)
{
    var xhr,sendVal,targetID;
    e = e || window.event;//(IE...
    targetID = this.id.replace(/commonSourceFragment/,'commonTargetFragment');//fooHomeSelect -> barHomeSelect
    sendVal = this.options[this.selectedIndex].innerHTML.trim().substring(0,1);
    xhr = prepareAjax(false,(function(t)
    {
        return function()
        {
            reusableCallback.apply(this,[t]);
        }
    })(document.getElementById(targetID)),'/index/ajax');
    xhr({data:{newSelect:sendVal}});
}

function reusableCallback(elem)
{
    if (this.readyState === 4 && this.status === 200)
    {
        var data = JSON.parse(this.responseText);
        elem.innerHTML …
Run Code Online (Sandbox Code Playgroud)

javascript closures memory-leaks cross-browser

26
推荐指数
1
解决办法
9003
查看次数

使用AngularJS/jQuery分离的DOM树

所以我有一个非常简单的Angular应用程序,我试图弄清楚是什么原因导致分离的DOM树出现在chrome Profiler中.例如,当您加载此页面时:

http://rztest.nodejitsu.com/dashboard

我得到2个独立的DOM树,一个有2个条目,另一个有3个条目.这个页面不使用任何自定义指令,所以它必须是Angular或jQuery的东西,但是我只是没有看到任何会导致这些分离的DOM树的东西.

问题变得更大(如果你点击项目链接并做另一个配置文件,那里有更多独立的DOM树和条目)所以我希望如果我能修复这个非常简单的例子,它会在其余部分级联申请.

还要注意我正在使用ui-router但是我已经尝试使用Angular的默认路由器同样的结果.即使是不使用jQuery 的todomvc Angular应用程序(http://todomvc.com/architecture-examples/angularjs/#/)也已经分离了DOM树.

UPDATE

我已经从应用程序中取出了jQuery,在我的简单页面上,除了一个独立的dom树之外的所有dom树都消失了(那个是来自AngularJS,我知道它在哪里).当我尝试使用更复杂的页面时(使用带有templateUrl并进行转换的自定义指令),删除jQuery似乎没有帮助.

我不确定jQuery是否是实际问题(或者可能是它的一部分)或者Angular是如何使用jQuery/jqLit​​e的.

有谁知道jQuery 1.10.x中是否存在已知的分离DOM树?

jquery memory-leaks angularjs

26
推荐指数
1
解决办法
5107
查看次数