# CanJS Performance

**URL:** <https://forums.bitovi.com/t/canjs-performance/231>\
**Category:** CanJS\
**Created:** [April 14, 2016, 12:41pm UTC](https://forums.bitovi.com/t/canjs-performance/231 "2016-04-14T12:41:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RALifeCoach](https://avatars.discourse-cdn.com/v4/letter/r/5e9695/32.png) [@RALifeCoach](https://forums.bitovi.com/u/RALifeCoach)\
**Post date:** [April 14, 2016, 12:41pm UTC](https://forums.bitovi.com/t/canjs-performance/231/1 "2016-04-14T12:41:01Z")

</div>

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:

```auto
          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:

```auto
            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)
                }
            }));

```

---

<div class="post-metadata">

**Author:** ![RALifeCoach](https://avatars.discourse-cdn.com/v4/letter/r/5e9695/32.png) [@RALifeCoach](https://forums.bitovi.com/u/RALifeCoach)\
**Post date:** [April 14, 2016, 12:44pm UTC](https://forums.bitovi.com/t/canjs-performance/231/2 "2016-04-14T12:44:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [April 14, 2016, 1:08pm UTC](https://forums.bitovi.com/t/canjs-performance/231/3 "2016-04-14T13:08:53Z")

</div>

> [@RALifeCoach](#):
>
> var container = can.stache('\<leaderboard-new-table {parent}=“parent” ’ +  
> ‘{player-rows}=“playerRows” {cut-line}=“cutLine” {options}=“options”’ +  
> ‘{is-my-lb}=“isMyLb”\>\</leaderboard-new-table\>’);

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

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [April 14, 2016, 1:10pm UTC](https://forums.bitovi.com/t/canjs-performance/231/4 "2016-04-14T13:10:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RALifeCoach](https://avatars.discourse-cdn.com/v4/letter/r/5e9695/32.png) [@RALifeCoach](https://forums.bitovi.com/u/RALifeCoach)\
**Post date:** [April 14, 2016, 1:23pm UTC](https://forums.bitovi.com/t/canjs-performance/231/5 "2016-04-14T13:23:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RALifeCoach](https://avatars.discourse-cdn.com/v4/letter/r/5e9695/32.png) [@RALifeCoach](https://forums.bitovi.com/u/RALifeCoach)\
**Post date:** [April 14, 2016, 1:26pm UTC](https://forums.bitovi.com/t/canjs-performance/231/6 "2016-04-14T13:26:12Z")

</div>

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.