3

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: enter image description here

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.

skmasq
  • 4,470
  • 6
  • 42
  • 77
  • What browser are you using? – Roy J Jun 11 '15 at 17:33
  • @RoyJ Working with `Chrome 43.0.2357.81 m` – skmasq Jun 11 '15 at 17:33
  • 1
    I remember running to an issue like this. For ~1500 rows of data, it took minutes to add/remove sets of rows. I don't remember what I did exactly to alleviate it but it think what it ultimately boiled down to was that you had to minimize the amount of time was spent creating dom elements. A lot of the time was spent in the GC which killed it. In my case, a lot of the dom elements were being recreated because the data objects I bound to them were constantly being rebuilt from scratch. Also updates need to be done in a single batch, do not update individually. – Jeff Mercado Jun 11 '15 at 18:08
  • @JeffMercado Attached Chrome timeline - it seems that the most time spent is in scripting rather then rendering and painting. – skmasq Jun 11 '15 at 18:20
  • It's sad that in the end you had to choose another framework/ lib to solve the problem.. – webketje Jun 20 '15 at 17:55

1 Answers1

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

tcigrand
  • 2,357
  • 2
  • 14
  • 24
  • 2
    More on profiling in Chrome: http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/ – Roy J Jun 11 '15 at 17:48
  • I'm really not sure where to look at and what to investigate - see updated post with timeline. – skmasq Jun 11 '15 at 18:47