使用jquery append()添加DOM元素似乎会泄漏内存？

Question

使用jquery append()添加DOM元素似乎会泄漏内存？

use*_*346 6 memory jquery dom memory-leaks

刚刚遇到了一个客户,他们的Ajax webapp中存在巨大的内存泄漏问题.所以我决定创建以下测试用例来演示这个问题:

我在下面的例子中使用了drip/Sieve进行内存分析(http://home.orange.nl/jsrosman/)

案例很简单:我有以下javascript:

<html>
    <head>    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>    
</head>    
<script type="text/javascript">

    var lihtml = "<li class='green'>this is a test text</li>";

    function populatelist() {
        for (var i = 0; i < 10000; i++) {
            $('#listparent').append(lihtml);
        }    
    }    

    function clearlist() {
        $('#listparent').empty();
        if (typeof (CollectGarbage) == "function") {
            alert('gc');
            CollectGarbage();
        }    
    } 


    /* Alternative clearlist with Remove instead of Empty(), still leaks */
    function clearlist() {
        /* test remove the parent itself instead of empty below */
        $('#listparent').remove();
        $('body').append("<ul id='listparent'>");        
        //$('#listparent').empty();
        if (typeof (CollectGarbage) == "function") {
            alert('gc');
            CollectGarbage();
        }
    }

   /* Edit!, this is the most effective way to release memory so far */
   function clearlist() {
    $('#listparent').html("");
    if (typeof (CollectGarbage) == "function") {
        alert('gc');
        CollectGarbage();
    }
}
</html>   
</script>

<body>
    <button onclick="javascript:populatelist()">Populate list</button>
    <button onclick="javascript:clearlist()">Clear list</button>
    <ul id="listparent">
        <li>kjjk</li>
    </ul>    
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

每次点击填充列表都会附加10000个li元素(表示为文本).Clearlist调用jquery empty(),据说应该清除DOM子树并使其符合GC的条件.

所以我在sIEve中运行这个案例,并且每次我追加新元素时内存使用量增加,我从未见过垃圾收集或空闲内存.甚至当RAM使用率达到1.5GB时,即使我尝试为IE显式调用GC.

这与我在使用Jquery Ajax作为List数据而不是我的静态内容obv的客户看到的sympton相同.

我是以错误的方式创建DOM吗？任何人都可以告诉我为什么它不是垃圾收集,我看不到任何其他DOM元素的引用,为什么它们不应该被垃圾收集.另一个奇怪的行为是,当我点击空列表时(当调用jquery empty()方法时),有时候sIEve内存使用量会增加吗？

如果有人提出意见我将非常高兴.

更新,我尝试使用$('#listparent').html("")而不是正确释放DOM,至少它是在sIEve中发布的.我想这是迄今为止最好的解决方案,虽然我没有解释为什么remove()和empty()似乎不起作用.也许他们只为静态添加的元素工作？

Answer 1

小智 1

是的，你可以像这样做出巨大的改进

var lihtml = "<li class='green'>this is a test text</li>",
    listring = "";

function populatelist() {
        for (var i = 0; i < 10000; i++) {
            listring += lihtml;
        }    

        $('#listparent').append(listring);

    }    
...

Run Code Online (Sandbox Code Playgroud)

尽可能少地限制 DOM 访问。

不同之处在于您创建了 1 个单个追加，而不是 10,000 个追加。你总是需要避免循环内的 DOM 操作

编辑：而不是空（）你的ul你尝试删除（）ul然后突然重新创建它？

归档时间：	14 年，10 月前
查看次数：	3437 次
最近记录：	9 年前