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

我最近构建了一个带有JS/jQuery UI（位于视图HTML之上）的单页ASP.NET MVC 3，Javascript工作的总体思路如下。我遇到了GC无法正确释放内存的问题，并在分离的DOM（可在Chrome的开发者工具堆分析器中查看）中留下大量元素（最大的表单有24000个，15-20k，1k取决于加载/卸载的表单）

我曾尝试使用javascript进行迭代以删除.Destroy（）函数中的事件和元素，与$（container.empty（）或$（container.remove（）相比，它大大减少了分离DOM中的元素数量。但是我的记忆从来没有正确地收集下来，它只是在每次加载/卸载过程中不断上升。有随机间隔的下降，但不是我预期的数量。这么多元素保持挂起状态是正常的，还是我的代码运行方式存在一些基本问题

感谢您抽出时间阅读此文章

---

第一篇帖子，请温柔点…

我最近还在.Net MVC3中构建一些单页应用程序。我怀疑你的问题是因为微软试图让开发者远离JS和C#，在你的页面上乱搞Javascript和Jquery

我能给你的最好建议是，你需要抛弃微软的所有缺点，构建应用程序的html/js部分，就好像它完全独立于平台一样。这意味着您将主要在MVC中使用M，并且您只需要足够的Cs来管理您的Ms。如果视图都是HTML和Javascript，那么生活会变得简单得多。以下是如何开始：

• 删除所有预打包的服务器端代码，包括Razor或ASPX页面
• 切换到静态HTML文件、静态JS文件
• （可选）用于管理您的JS依赖项（仔细阅读文档，一开始看起来很奇怪，但功能强大得难以置信）
• （可选）用于为JS代码提供一些结构
• （可选）用于客户端模板引擎

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

一旦您的客户端代码与Microsoft破坏Javascript的尝试完全断开连接，您就可以专注于您的数据，它应该在MVC3中使用基于JSON的Rest服务。你可以在这方面得到帮助

---

祝你好运

感谢您的真知灼见。我怀疑这可能与MS有关，但希望不是。感谢您提供的信息和您花费的时间收集这些信息，我一定会调查您提到的LIB。当心！如果你打算抨击一个工具集，不要猜测，而是提供证据。发布的所有内容都是客户端的，不依赖于MS技术，只是因为服务器端使用了MVC。在destroy方法中，尝试使用remove，因为它将删除与要删除的元素关联的所有绑定、子元素和数据元素。祝你好运。我并不是在抨击这个工具集，我只是想解释一下，微软添加的很多Javascript都是为了支持他们的服务器端模板、会话、回发等。如果你试图构建一个单页应用程序，它主要运行客户端，那么它们额外的JS库大部分都是开销，根据我的轶事经验，可能会导致一些意想不到的结果。因此，我唯一的“证据”是，当我停止使用他们的JS工具时，我的生活变得轻松了一点，我感觉自己可以更好地控制自己的工作在进一步研究了这个问题，并在会议上与不同的开发人员交谈后，我得出结论，这就是目前的情况。其他人在内存管理方面也遇到同样的问题。您可以通过让每个“部分”进行回发，然后将每个页面作为SPA来轻松修复此问题。

 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;
    }

}