使用Javascript / jQuery AJAX的ASP.NET MVC 3单页面应用程序：内存和分离的DOM问题

我最近构建了一个带有JS / jQuery UI的单页ASP.NET MVC 3(在视图的 HTML之上),Javascript工作的一般概念如下.我遇到了GC没有正确释放内存的问题,并且在Detached DOM中留下了大量元素(最大格式24,000,15-20k和1k,具体取决于加载/卸载的格式)(可在Chrome的开发人员工具中查看Heap Profiler ).

var MainApp = function () {
    var meBase = this;
    this.activeObject = undefined;

    this.someFunc = function (val1,val2,etc) {
        //Some operation here
    }
    this.GetView(x,y,z)
    {
        if (meBase.activeObject != null) {
            meBase.BustActive(x,z);
        } else {
            if (condition) {
                //Load static html via $.get
            } else {
                switch (activeObjectSelector) {
                    case CASEHERE:
                        self.activeObject = new SomeObject();
                        self.activeObject.BeginInit();
                        break;
                    case .....
                }
            }
        }
    }
    this.BustActive = function (x,z) {
        if (meBase.activeObject.Destroy()) {
            meBase.activeObject = null;
            meBase.GetView(x,z);
        }
    }
}
var SomeObject = function () {
    var meBase = this;
    this.Bindings = [];
    this.Container = "#somecontainer";
    //Some Properties

    this.Unbind = function () {
        $("#Somecontainer .bound").each(function () {
            if ($(this)["click"] && $.isFunction($(this)["click"])) {
                $(this).unbind('click');
            }
            if ($(this)["blur"] && $.isFunction($(this)["blur"])) {
                $(this).unbind('blur');
            } if ($(this)["change"] && $.isFunction($(this)["change"])) {
                $(this).unbind('change');
            }
            if ($(this)["mouseenter"] && $.isFunction($(this)["mouseenter"])) {
                $(this).unbind('mouseenter');
            } if ($(this)["mouseleave"] && $.isFunction($(this)["mouseleave"])) {
                $(this).unbind('mouseleave');
            }
        });

        //iterate through meBase.Bindings to remove any 'special' bindings such as 'live/die'
    }
    this.MapEvents = function () {
        //For Example

        $("#Somecontainer #element").click(meBase.someAction).addClass('bound');

        // create object with removal function for 'special' bindings such as 'live/die'
        // and push it into meBase.Bindings;
    }
    this.InitUI = function () {
        //Setup tabs,datepickers,etc
    }
    this.Destroy = function () {
        meBase.Unbind();

        //remove object fields and methods
        delete meBase.someProp;

        $(meBase.Container).empty();
        delete meBase.BeginInit;
        delete meBase.InitUI;
        delete meBase.MapEvents;
        delete meBase.someAction;
        delete meBase;
        return true;
    }
    this.someAction = function () {
        //Do something productive..hopefully
    }
    this.ProcessView = function (data) {
        $("#MainContainer").fadeOut(150,"swing",function () {
            $(this).empty().append(data);
        });
    }
    this.LoadView = function () {
        $.ajax({
            url: '/somewhere/something',type: 'GET',success: meBase.ProccessView,error: SomeGlobalObject.LogAjaxError
        });
    }
    this.BeginInit = function () {
        //Load pages via ajax
        meBase.LoadView();
        meBase.InitUI();
        meBase.MapEvents();
        return true;
    }

}

我尝试使用javascript进行迭代以删除.Destroy()函数中的事件和元素,并且它大大减少了Detached DOM中剩余的元素数量,而不是$(容器).empty()或$(容器).remove().但是我的记忆永远不会正常收集,它会在每次加载/卸载期间不断上升.随机间隔有下降,但不是我预期的数量.这么多元素保持挂起是否正常,或者我的代码运行方式是否存在一些基本问题？

感谢您抽时间阅读！

第一篇文章,请温柔……

解决方法

我最近也在.Net MVC3中构建了一些单页应用程序.我怀疑你的问题正在发生,因为微软试图让开发人员远离JS和C#,在你的页面上使用Javascript和Jquery非常糟糕.

我能给你的最好的建议是,你需要抛弃微软的所有瑕疵,并构建应用程序的html / js部分,就好像它完全独立于平台一样.这意味着你将主要使用MVC中的M,并且你只需要足够的C来管理你的女士如果View是全部HTML和Javascript,生活会变得更加简单.以下是如何入门：

>删除所有预先打包的服务器端代码,包括Razor或ASPX页面.
>切换到静态HTML文件,静态JS文件
>(可选)使用Require.js管理您的JS依赖项(仔细阅读文档,一开始看起来很奇怪,但它非常强大)
>(可选)使用Spine.js为JS代码提供一些结构
>(可选)将Handlebars.js用于客户端模板引擎

Require和Spine很快成为我最喜欢的构建单页应用程序的工具.它们为您提供了一些非常强大且灵活的工具,可帮助您管理您将在任何单页应用程序中编写的增加的Javascript代码量.

一旦你的客户端代码与微软破坏Javascript的尝试完全脱节,你就可以专注于你的数据,这应该在MVC3中使用基于JSON的Rest服务.你可以获得here和here的帮助.

祝好运！