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

Question

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

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

Answer 1

如果只需要替换a的内容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

低至约200ms(总体 - 包括往返服务器,数据库读取等)