javascript - ASP.NET MVC 3 单页应用程序使用 Javascript/jQuery AJAX : Memory and Detached DOM Issues

Question

我最近构建了一个带有 JS/jQuery UI(在 View 的 HTML 之上)的单页 ASP.NET MVC 3，Javascript 工作的总体思路如下。我遇到的问题是 GC 没有正确释放内存并在分离的 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() 函数中的事件和元素，与 $(container).empty() 或 $(container).remove 相比，它大大减少了分离 DOM 中剩余的元素数量().但是我的内存从来没有正确地收集回来，它只是在每次加载/卸载期间不断上升。随机间隔有下降，但不是我期望的数量。这么多元素保持挂起状态是正常的，还是我的代码运行方式存在一些根本性问题？

感谢您花时间阅读本文!

第一次发帖，请温柔...

Answer 1

我最近也在 .Net MVC3 中构建一些单页应用程序。我怀疑您的问题是因为 Microsoft 在试图让开发人员远离 JS 和 C# 时，非常糟糕地破坏了您页面上的 Javascript 和 Jquery。

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

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

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

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

祝你好运!