javascript - 分析 KnockoutJS observableArray

Question

我想在 KnockoutJS 中分析一个 observableArray，看看在 HTML 中填充和渲染 observableArray 需要多长时间。

我计划使用如下所示的老式方法。我从中得到的结果准确吗？或者有更好的方法来进行此分析

JavaScript

    var arr = [],
        itemCount = 200;

    for (var i = 0; i < itemCount; i++) {
        arr.push('item ' + i);
    }

    var t1 = new Date();
    var viewModel = {
        items: ko.observableArray(arr),
        vmName: ko.observable('View Model')
    };

    ko.applyBindings(viewModel);
    var t2 = new Date();


    console.log(t2 - t1); //Shows the time in milliseconds 

HTML

<div data-bind="foreach: items">
    <div data-bind="html: $data"></div>
</div>

我根据结果生成的图表

Answer 1

正如您的图表所示，这基本上是执行此操作的正确方法。这是因为 ko.applyBindings 是同步调用。参见这里:is ko.applyBindings synchronous or asynchronous?

我会像这样进行一个小修改，因为您对分析创建可观察对象所需的时间不感兴趣。然而，这个时间可以忽略不计，只会为您的分析添加一个微小的(如果有的话)常数。

var viewModel = {
    items: ko.observableArray(arr),
    vmName: ko.observable('View Model')
};

var t1 = new Date();
ko.applyBindings(viewModel);
var t2 = new Date();


console.log(t2 - t1); //Shows the time in milliseconds