javascript - 具有动态列的阵列的 knockout 性能问题

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]);

数据通过 knockout 映射按以下方式分配:

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>

我遇到的问题是渲染 95 行 6 列需要近 30 秒。

• 如何排查性能问题？
• 有什么工具吗？
• 是否有任何指导方针可以帮助您在类似的情况下最大限度地提高性能场景？

Chrome 时间轴:

更新:我压力很大，所以我用reactjs重写了表格，这解决了很多问题，并且渲染时间只有1.5秒。

Answer 1

您可以使用 Chrome 的开发工具来排查性能问题，特别是 Profiles , Network和 Timeline在你的情况下。

请包含一个带有重现的 JSFiddle，这样可以更轻松地解决问题。