在 KnockoutJS 中更改模型数据时，Javascript 内存泄漏

我们正在构建一个相当大的单页应用程序，使用 KnockoutJS 作为“数据处理程序”。

问题是，当更改模型数据时，垃圾收集器不会处理旧模型（看起来如此）。

该应用程序有大约 12 个不同的模型，其中包含计算的可观察量，您可以使用它们检索关系。

在 ViewModel 中，每个模型都有一个可观察的数组。假设我用 100 个模型实例填充一个数组。当我后来想要更改这 100 到 100 个不同的实例时，内存会增长并且永远不会下降（我正在使用 Chrome 并在 Windows 任务管理器中检查）。

该应用程序非常复杂，但我将给出一些我正在做的事情的示例（代码被复制并简化以仅显示一些示例，某些代码可能看起来很奇怪，但可能是因为我删除了命名空间和其他内容） 。

视图模型：

var ViewModel = (function () {
    var _departments = ko.observableArray(),
        _addresses = ko.observableArray();

    var UpdateData = function (data) {

        if (typeof data.departments != 'undefined') {
            var mappedData = ko.utils.arrayMap(data.departments, function(item) {
                return new Department(item);
            });
            _departments(mappedData);
        }

        if (typeof data.addresses != 'undefined') {
            var mappedData = ko.utils.arrayMap(data.addresses , function(item) {
                return new Address(item);
            });
            _addresses (mappedData );
        }
    };

    return {
        departments: _departments,
        addresses: _addresses,
        UpdateData: UpdateData
    };

})();

部门模型

var Department = function (data) {

    var Department = {
        Id: ko.observable(data.ClusterId),
        Number: ko.observable(data.Number),
        Name: ko.observable(data.Name)
    };

    var Addresses = ko.computed(function () {
        return ko.utils.arrayFilter(ViewModel.addresses(), function (address) {
            return address.DepartmentId() === Department.Id();
        }).sort(function (a, b) {
            return a.Number() < b.Number() ? -1 : 1;
        });
    }, Department);

    var Update = function (data) {
        Department.Id(data.Id);
        Department.Number(data.Number);
        Department.Name(data.Name);
    };

    $.extend(Department, {
        Addresses: Addresses,
        Update: Update
    });

    return Department;

};

地址模型

var Address = function (data) {

    var Address = {
        Id: ko.observable(data.Id),
        Number: ko.observable(data.Number),
        Text: ko.observable(data.Text),
        DepartmentId: ko.observable(data.DepartmentId)
    };

    var Department = ko.computed(function () {
        return ko.utils.arrayFirst(ViewModel.departments(), function (item) {
            return item.Id() == Address.DepartmentId();
        });
    }, Address);

    var Update = function (data) {
        Address.Id(data.Id);
        Address.Number(data.Number);
        Address.Text(data.Text);
        Address.DepartmentId(data.DepartmentId);
    };

    $.extend(Address, {
        Department: Department,
        Update: Update
    });

    return Address;

};

还有很多代码，但我正在寻找一种开始查找泄漏的方法（我已经尝试找到它几个小时了）。我的例子中有什么可能导致它吗？或者还有其他人遇到过这样的问题吗？该应用程序还有多个自定义绑定，但我尝试删除使用这些绑定的 HTML，似乎“原始”javascript 对象占用了内存。

如果我将模型中的可观察和计算变量更改为返回静态值的函数，则对象似乎已被处理。

The computed's每个内Department and Address将保留他们对视图模型的订阅，直到您交换部门和地址。例如，我希望这会泄漏内存：

ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });
ViewModel.UpdateData({ departments: [ /* some new departments */ ] });

在这种情况下，所有“旧”部门仍将绑定到您的ViewModel.Addresses。更换出Addresses然后应该释放内存：

ViewModel.UpdateData({ addresses: [ /* some new addresses */ ]});
// all the old departments should get GC'd now.

解决此问题的一种方法是修改您的ViewModel在移除旧对象之前将其处理掉：

var ViewModel = (function () {
var _departments = ko.observableArray(),
    _addresses = ko.observableArray();

var UpdateData = function (data) {

    if (typeof data.departments != 'undefined') {
        var mappedData = ko.utils.arrayMap(data.departments, function(item) {
            return new Department(item);
        });

        // dispose of the computeds in the old departments
        ko.utils.arrayForEach(_departments(), function (d) { d.Addresses.dispose(); });
        _departments(mappedData);
    }

    if (typeof data.addresses != 'undefined') {
        var mappedData = ko.utils.arrayMap(data.addresses , function(item) {
            return new Address(item);
        });
        // dispose of the computeds in the old addresses
        ko.utils.arrayForEach(_addresses(), function (a) { a.Department.dispose(); });
        _addresses (mappedData );
    }
};

return {
    departments: _departments,
    addresses: _addresses,
    UpdateData: UpdateData
};

})();

阅读淘汰赛计算文档 http://knockoutjs.com/documentation/computedObservables.html。具体滚动到底部并阅读文档dispose。确保你dispose您创建的任何计算值（如果它们被删除，但它们所依赖的可观察量没有被删除）。