# Nested properties rendering is slow

**URL:** <https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190>\
**Category:** Performance\
**Created:** [September 3, 2014, 3:11pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190 "2014-09-03T15:11:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarasa](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sarasa](https://discuss.emberjs.com/u/sarasa)\
**Post date:** [September 3, 2014, 3:11pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/1 "2014-09-03T15:11:58Z")

</div>

Given 10 posts models:

This template renders in 3-7ms.

```
{{#each posts}}
    <tr>
        <td>{{title}}</td>
    </tr>
{{/each}}

```

This one, renders in 40-60ms.

```
{{#each posts}}
    <tr>
        <td>{{title}}</td>
        <td>{{author.name}}</td>
    </tr>
{{/each}}

```

I need some help with optimizing this, since in my application rendering time for tables (with just 10 rows) take around 300-400ms.

Times were measured using Ember Inspector (Chromium), and models are `DS.Model` instances.

---

<div class="post-metadata">

**Author:** ![estshy](https://avatars.discourse-cdn.com/v4/letter/e/dec6dc/32.png) [@estshy](https://discuss.emberjs.com/u/estshy)\
**Post date:** [September 4, 2014, 11:34am UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/2 "2014-09-04T11:34:15Z")

</div>

How about rendering time for 2 fields in first example?

```
{{#each posts}}
    <tr>
        <td>{{title}}</td>
        <td>{{title}}</td>
    </tr>
{{/each}}

```

If it isn’t so obvious you can use `unbound` or `group` helper to get your rendered template faster.

```
{{#group}}
{{#each posts}}
    <tr>
        <td>{{title}}</td>
        <td>{{author.name}}</td>
    </tr>
{{/each}}
{{/group}}

```

---

<div class="post-metadata">

**Author:** ![sarasa](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sarasa](https://discuss.emberjs.com/u/sarasa)\
**Post date:** [September 4, 2014, 2:10pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/3 "2014-09-04T14:10:34Z")

</div>

Thanks for your reply. Rendering two (non nested) properties seems to not to impact performance.

Ive read at [Ember is very slow at rendering lists](http://discuss.emberjs.com/t/ember-is-very-slow-at-rendering-lists/1643) about the `{{group}}` helper before, but wrapping `{{#each}}` with it in my application, causes an error (“TypeError: Cannot read property ‘view’ of undefined”).

I tried using `{{#each groupedRows=true}}`, and `unbound` too, but neither could help that much.

---

<div class="post-metadata">

**Author:** ![estshy](https://avatars.discourse-cdn.com/v4/letter/e/dec6dc/32.png) [@estshy](https://discuss.emberjs.com/u/estshy)\
**Post date:** [September 4, 2014, 8:59pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/4 "2014-09-04T20:59:20Z")

</div>

Is `author.name` static property or computed property?

---

<div class="post-metadata">

**Author:** ![sarasa](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sarasa](https://discuss.emberjs.com/u/sarasa)\
**Post date:** [September 5, 2014, 7:13pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/5 "2014-09-05T19:13:47Z")

</div>

Seems like the cause lies in computed properties that Ember Data generates for related models.

Render time does not exceed 10ms if i use a custom property that returns a random model from the store instead of `DS.belongsTo` (for `author` in the example).

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [September 5, 2014, 8:08pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/6 "2014-09-05T20:08:24Z")

</div>

Please share the model definition, and possibly a JSBin showing the timing.

---

<div class="post-metadata">

**Author:** ![sarasa](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sarasa](https://discuss.emberjs.com/u/sarasa)\
**Post date:** [September 6, 2014, 12:44am UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/7 "2014-09-06T00:44:09Z")

</div>

Here is a JSBin [http://jsbin.com/qapekekaxojo/4](http://jsbin.com/qapekekaxojo/4).

Models are always pushed to store to discard computed properties cached values.

I do this intentionally to simulate my application where i noticed browser lag when changing page number.

When models are downloaded from server, they are pushed to store by the adapter, and even if these were in the store previously (and not need to be instantiated), the push & render secuence impacts performance heavily when using relations.

In my desktop render times for the JS Bin are:

- Without author: 11ms.
- With: 60ms.

---

<div class="post-metadata">

**Author:** ![sarasa](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sarasa](https://discuss.emberjs.com/u/sarasa)\
**Post date:** [September 11, 2014, 4:01pm UTC](https://discuss.emberjs.com/t/nested-properties-rendering-is-slow/6190/8 "2014-09-11T16:01:38Z")

</div>

After downgrading Ember Data to 1.0.0-beta.8, render time was reduced by half. I will stick my projects with this version for now.