具有动态列

Question

我正在使用knockout.repeat绘制带有以下数据的动态列数组：

var columns = ko.observableArray([
    new Column(1),
    new Column(2),
    new Column(3),
    new Column(4),
    new Column(5)
});

var array = ko.observableArray([1..95]);

使用敲除映射以下列方式分配数据：

mappingConfig = {
    create: function (options) {
        return new Row(options.data);
    }
};
ko.mapping.fromJS(data, mappingCOnfig, array);

以下列方式：

<div data-bind="repeat: {foreach: array, item: '$row'}">
        <div data-bind="repeat: {foreach: column, item: '$col'}">
            <input data-bind="value: $row()[$col().Name]"/>
        </div>
    </div>

我遇到的问题是，渲染包含6列的95行需要几乎 30秒。

• 如何排查效果？
• 有没有工具？
• 是否有任何指导方针如何最大限度地提高性能 场景？

Chrome时间轴：

更新：我受到压力，所以我在reactjs中重新编写了表格，这解决了很多问题并且只渲染了1.5秒。

Answer 1

您可以使用Chrome的开发工具来排查性能问题，具体来说就是Profiles，Network和Timeline。

请包含一个带有重现的JSFiddle，它可以更容易地解决问题。