Question

我最近构建了一个带有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, y, 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, y, z) {
        if (meBase.activeObject.Destroy()) {
            meBase.activeObject = null;
            meBase.GetView(x, y, 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 （）。但是我的记忆永远不会正常收集，它会在每次加载/卸载期间不断上升。随机间隔有下降，但不是我预期的数量。这么多元素保持挂起是否正常，或者我的代码运行方式是否存在一些基本问题？

感谢您花时间阅读本文！

第一篇文章，请温柔......

Answer 1

我最近也在.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获得帮助。

祝你好运！

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

1 个答案: