使用jQuery AJAX调用创建的DOM元素不会从内存中释放

时间:2015-02-25 11:30:29

标签: javascript jquery ajax dom

我昨天问了这个问题,但已经添加了更多信息并重新构建了问题。

我已经为数字标牌系统构建了一个可以持续运行的网络应用程序。

有一个jQuery AJAX调用从服务器检索html并用响应替换div的内容,这样就不会有可见的丑陋页面刷新。

问题是浏览器内存不足并在运行几个小时后崩溃。看一下Chrome中的时间轴,似乎虽然替换了HTML元素,但它们仍以某种方式保存在DOM中。

以下jQuery代码生成以下时间轴:

function loadDiary()
    {
    if ((diaryBusy == false) && (navigatorOnline))
        {
        diaryBusy = true;

        $.ajax  (
                    {
                    url     : '/get/data/from/server',

                    cache   : false,

                    success : function(response)
                                {
                                $('#diary').empty();                                                                                                                   
                                $('#diary').html(response);

                                diaryBusy = false;
                                loadDiaryTimer();
                                },

                    error   : function()
                                {
                                diaryBusy = false;
                                loadDiaryTimer();
                                }
                    }
                );
        }
    }

Chrome timeline for jQuery Ajax call

以下javascript生成以下时间轴:

function loadDiary()
    {
    if ((diaryBusy == false) && (navigatorOnline))
        {
        diaryBusy = true;

        xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                    document.getElementById('diary').innerHTML = '';
                    document.getElementById('diary').innerHTML = xmlhttp.responseText;

                    diaryBusy = false;
                    loadDiaryTimer();
                    }
            }

        xmlhttp.open('GET','/get/data/from/server',true);
        xmlhttp.send();
        }
    }

Chrome timeline not using jQuer Ajax call

您可以看到,jQuery在短测试中,当只需要1835时,节点数增加到358278.

这会逐渐强制垃圾收集,但内存使用会随着时间的推移而增加。

在第二个示例中,最大节点数为1835,并且从不需要垃圾收集。

第二段代码没问题,但我需要在某些动态内容中附加一个jQuery插件,因此非jQuery解决方案不是一种选择。

为什么会出现这种情况以及如何阻止元素数量增长的任何建议?

感谢阅读。

0 个答案:

没有答案