Nested properties rendering is slow

Performance
1

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.

2

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

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

4

Is author.name static property or computed property?

5

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

6

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

7

Here is a JSBin 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.
8

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.