Knockout performance issues with arrays having dynamic columns

Question

I'm using knockout.repeat to draw dynamic column array with following data:

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

Data is assigned the following way with knockout mapping:

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

In the following way:

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

The issue I'm having is that it takes nearly 30 seconds to render 95 rows with 6 columns.

• How can I troubleshoot the performance?
• Are there any tools?
• Are there any guide lines how to maximize performance in similar scenarios?

Chrome timeline:

UPDATE: I was under pressure, so I re-wrote the tables in reactjs, which solved a lot of issues and is rendering only 1.5 sec.

Answer 1

You can use Chrome's dev tools to troubleshoot preformance, specifically Profiles, Network and Timeline in your case.

Please include a JSFiddle with a reproduce and it'll be easier for use to work through the problem.