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 ---＆gt; + - 1小时后： 279.4 MB
在chrome中，内存使用量不断增加（单个标签的内存）：
开始： 52.912 MB ---＆gt; + - 1小时后： 566.120 MB
在边缘，内存使用量也在不断增加（单个标签的内存）：
开始： 109.560 MB ---＆gt; + - 1小时后： 385.820 MB

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

Answer 1

显然这是一个浏览器问题。

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

使用Google Chrome版本＆＃39; 58.0.3029.110＆＃39;。

解决

Answer 2

即使您正在替换observable中的数组，它们仍然附加到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);

请参阅此帖子中的＃2：https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/

内存泄漏与KnockoutJS foreach绑定

2 个答案: