填充大型可观察数组时，我可以加速挖空吗？

问题描述：

我有一个web应用程序，它为某些数据执行SOAP请求，并用结果填充淘汰赛视图模型。我目前正在获得大约1000行条目，这些条目必须推到我的淘汰赛视图模型上。在chrome中分析页面显示，大部分加载时间/ CPU花费在knockout.js中。我徘徊，如果有一种方式可能会延迟任何淘汰赛更新/处理，直到所有的项目被推入可观察数组。填充大型可观察数组时，我可以加速挖空吗？

编辑：为了更清楚，我想我正在寻找类似延迟或throttling。但是看起来像this answer，我可能会更好地构建一个普通数组，然后填充整个可观察数组，而不是将每个项直接推送到可观察数组。这可能会消除我需要延迟或限制绑定。任何建议？

是否使用ko.mapping？ – delixfe 2013-02-08 20:26:23

答

如果您只需要替换的内容observableArray，则不需要循环访问数组。

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

this.obsArray(newData);

这工作得很好。谢谢。 – xdumaine 2013-02-08 20:30:51

答

也许另一种解决方案是从数组中插入你的元素，通过20或50项大块插入到可观察数组中？

由于您将添加项目到observablearray，淘汰赛将显示他们，因为您添加它们，但它可以帮助您减少所需的CPU数量，因为您将能够在每个块之间添加延迟。

值得一试。

答

我拉约850项到我的视图模型和它们在选择显示它们。推入一个循环需要大约15秒，并且线性降解。

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

下降到约200毫秒（整体 - 包括往返于服务器，数据库读取等）

这个页面上的解决方案提供了巨大的性能提升，感谢圣诞礼物:)我知道它迟了2年，但如果你仍然活跃，考虑复制/粘贴代码，所以如果页面离线，我们仍然有它我们的处置.. – Sam 2015-12-24 07:11:54

如果它脱机，你仍然应该能够通过archive.org看到它... https://web.archive.org/web/20150812144018/http://www.knockmeout.net/2012 /04/knockoutjs-performance-gotcha.html – 2016-01-02 22:41:47

虽然我更愿意参与讨论，但我不以为然。请查看http://*.com/help/how-to-answer段落“为链接提供上下文”准则。不过，谢谢你的解决方案，它帮了我很多。 – Sam 2016-01-19 07:31:32

答

当然，你可以使你的代码的变更，在其他答案中提出。另一种方法是使用我的延期更新插件：https://github.com/mbest/knockout-deferred-updates

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

现在使用扩展器或'ko.options.deferUpdates = true;'原生支持' – Johan 2017-01-20 22:24:25

答

这可能是最好的办法：

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 
} 
}

填充大型可观察数组时，我可以加速挖空吗？

相关推荐