Question

我有一个Web应用程序，它对某些数据执行SOAP请求，并使用结果填充knockout viewmodel。我现在回来了大约1000个项目，必须推到我的淘汰视图模型。在chrome中分析页面显示，在knockout.js中花费了大部分加载时间/ CPU。如果有可能延迟任何淘汰更新/处理，直到所有项目都被推入可观察数组，我就会徘徊。

编辑：为了更清楚，我想我正在寻找延迟或throttling之类的东西。但看起来，从this answer看，我可能最好建立一个普通数组然后填充整个可观察数组，而不是将每个项目直接推到可观察数组上。这可能会消除我延迟或限制绑定的需要。有什么建议吗？

Answer 1

如果您只需替换 observableArray的内容，则无需遍历数组。

最有效的操作是简单地将其设置为新值：

this.obsArray(newData);

Answer 2

这可能是最好的方法：

function MyVM(){
    this.fooObsArray = ko.observableArray([]);
}

function Foo(){

var self = this;
self.vm = new MyVM();

this.pushSlow = function(arrayToBePushed){
    for (int i = 0; i < arrayToBePushed.length; i++){
        var element = arrayToBePushed[i];
        self.vm.fooObsArray.push(element);          //notifies ui foreach of elements => + delay
    }
}

this.pushFast = function(arrayToBePushed){
    var underlyingArray = self.vm.fooObsArray();

    for (int i = 0; i < arrayToBePushed.length; i++){
        var element = arrayToBePushed[i];
        underlyingArray.push(element);
    }

    self.vm.fooObsArray.valueHasMutated();          //notifies ui once all elements have been added => - delay
}
}

Answer 3

我在我的视图模型中提取了大约850个项目，并在选择中显示它们。推入一个循环大约需要15秒，并且线性降级。

我在这里使用了valueHasMutated解决方案：http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

低至约200毫秒（总体而言 - 包括往返服务器，数据库读取等）

Answer 4

当然，您可以根据其他答案的建议对代码进行更改。另一种方法是使用我的Deferred Updates插件：https://github.com/mbest/knockout-deferred-updates

插件将自动延迟对UI（或任何计算的可观察对象）的任何更新，直到在当前“线程”中完成所有更改为止。

Answer 5

也许另一种解决方案是将数组中的元素插入20或50个项目的可观察数组中？

由于您将向observablearray添加项目，因此当您添加项目时，knockout会显示它们，但它可能会帮助您减少所需的CPU数量，因为您可以在每个块之间添加延迟。

可能值得一试。

填充大型可观察阵列时，我可以加速淘汰吗？

5 个答案: