6

我有一个 Web 应用程序，它对一些数据执行 SOAP 请求并用结果填充淘汰视图模型。我目前收到了大约 1000 个订单项，这些订单项必须推送到我的淘汰视图模型中。在 chrome 中对页面进行分析表明，大部分加载时间/CPU 都花在了 knockout.js 中。如果有办法延迟任何淘汰更新/处理，直到所有项目都被推入可观察数组，我就会徘徊。

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

4

5 回答 5

11

如果只需要替换a 的内容，observableArray则不需要遍历数组。

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

this.obsArray(newData);
于 2013-02-08T16:46:10.470 回答
7

这可能是最好的方法：

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
}
}
于 2013-09-22T05:00:50.970 回答
5

我将大约 850 个项目拉入我的视图模型，并在选择中显示它们。推入一个循环大约需要 15 秒，并且具有线性退化。

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

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

于 2013-02-08T19:29:36.530 回答
3

当然，您可以按照其他答案中的建议对代码进行更改。另一种选择是使用我的延迟更新插件：https ://github.com/mbest/knockout-deferred-updates

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

于 2013-02-08T20:29:49.403 回答
1

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

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

可能值得一试。

于 2013-02-08T16:37:23.103 回答