KnockoutJS foreach 绑定的内存泄漏

Question

我运行在运行在 Google Chrome.
中使用我的 KnockoutJS v3.4.2（测试）应用程序时遇到问题我的页面内存占用一直在增加

测试代码是一段非常简单的代码，每秒更改可观察数组中的项目：

HTML:

<html>
    <head>
        <title>KnockoutJS</title>
    </head>
    <body>
        <h1>Foreach test</h1>
        <ul id="ul-numbers" data-bind="foreach: { data: listOfItems }">
            <li>
                <span data-bind="text: $data"></span>
            </li>
        </ul>

        <script type="text/javascript" src="./lib/knockout.js"></script>
        <script type="text/javascript" src="./index.js"></script> 
    </body>
</html>

JavaScript:

var vm = {
    listOfItems: ko.observableArray()
};

window.setInterval(function updateList(){
    var array = [];

    for(var i = 0 ; i < 1000; i++){
        var num = Math.floor( Math.random() * 500);
        array.push(num);
    }

    vm.listOfItems(array);
}, 1000);

ko.applyBindings(vm);

内存使用：

在 Firefox 中，内存使用量不会增加：
开始：459.6 MB ---> +- 1 小时后：279.4 MB
在chrome内存使用量不断增加（单个标签的内存）：
开始：52.912 MB ---> +- 1 小时后：566.120 MB
在edge中，内存使用量也在不断增加（单个标签的内存）：
开始：109.560 MB ---> +- 1 小时后：385.820 MB

我在这段代码中做错了什么吗？或者这是 Google Chrome 或 KnockoutJS 中的错误？

Answer 1

即使您要替换可观察对象中的数组，它们仍然附加到 DOM。在向数组添加新元素之前，您需要手动删除它们。

像这样：

var vm = {
    listOfItems: ko.observableArray()
};

window.setInterval(function updateList(){
    var array = [];
    vm.listOfItems.removeAll();//<--this is the important line
    for(var i = 0 ; i < 1000; i++){
        var num = Math.floor( Math.random() * 500);
        array.push(num);
    }

    vm.listOfItems(array);
}, 1000);

ko.applyBindings(vm);

参见此 post 中的 #2：https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/

Answer 2

显然这是浏览器问题。

当我现在运行我的测试项目时，内存没有增加。
测试项目可以在这里找到：https://github.com/knockout/knockout/issues/2223

已在 Google chrome 版本“58.0.3029.110”中解决。

KnockoutJS foreach 绑定的内存泄漏

Memory leak with KnockoutJS foreach binding

html

javascript

google-chrome

knockout.js

microsoft-edge