CanJS Performance

CanJS
1

I have a CanJS component. The data for the component is being handled by existing legacy code. All I am doing is taking the data and populating a div based table. The table is quite complex and the stache template is 165 lines long. Response times are poor. On Chrome on a MACbook Pro, the initial load takes 4 seconds. On a PC using IE the initial load time is 24 seconds. I ran a profile on IE and learned that of the 24 seconds 15 is spent on this line:

          var container = can.stache('<leaderboard-new-table {parent}="parent" ' +
                '{player-rows}="playerRows" {cut-line}="cutLine" {options}="options"' +
                '{is-my-lb}="isMyLb"></leaderboard-new-table>');

and 9 seconds is spent on this line:

            this.$leaderboardMain.append(container({
                parent: this,
                options: options,
                playerRows: playerRows,
                isMyLb: false,
                cutLine: {
                    position: cutLine,
                    showCutLine: this.context.leaderboardModel.cutLine.show_cut_line,
                    showProjected: this.context.leaderboardModel.cutLine.show_projected,
                    cutLineScore: this.context.utils.safeValue(this.context.leaderboardModel.cutLine.cut_line_score)
                }
            }));
2

Of the 15 seconds on the can.stache line, most are in hydrate and it’s children. Breaking it down further the child under hydrate taking the most time is renderer. Under renderer 14 seconds are being used by hydrateCallbacks. And on it goes - the call stack is very deep.

3

Are you re-creating that template multiple times? Why? Can’t you move that template out so it only gets compiled one time?

4

also, I’ve never seen a profiler break down times by a line. What profiler are you using? Typically they instrument function calls.

5

The line you reference is only called once. The playerRows include data for all 156 rows.

The profiler only shows functions being called. I was able to narrow it down to lines because the append function was identified as taking 9 seconds and the can.stache line is the only other line I have that uses canjs code.

6

I am finding that as I move code from stache templates into JS that the performance is improving - I am now down to 20 seconds on IE to load. In my opinion, that defeats the purpose have having a template.