Help needed with js-repaint-perf for Ember update

Performance
9

I did a small research and will appreciate your feedback @mixonic @wycats @chancancode

First of all, I changed source of raw data to the original ENV.generateData() used by other frameworks in tests (for instance React). Then I started to measure how much time is spent in different parts of loadSample function. I was pushing number of ms spent for the operation in arrays and once in 100 measurements console.log the average (see route/application.js for details)

All measurements were made on production builds.

Sample #1

Ember ver: 2.9.1 Description: Using component dbmon-database to represent tr and dbmon-query to represent td for top 5 queries

Code for dbmon-database:

<td class="dbname">
    {{db.dbname}}
</td>
<td class="query-count">
  <span class="{{countClassName}}">
{{queries.length}}
  </span>
</td>
{{#each topFiveQueries as |query|}}
    {{dbmon-query query=query class=(concat "Query" query.className)}}
{{/each}}

Time for rerendering ms: 170~180 screen shot 2016-11-30 at 07 17 46

Sample #2

Ember ver: 2.9.1 Description: Using component dbmon-database to represent tr and plain {{#each}} to represent td for top 5 queries

Code for dbmon-database:

<td class="dbname">
  {{db.dbname}}
</td>
<td class="query-count">
 <span class="{{countClassName}}">
  {{queries.length}}
 </span>
</td>
{{#each topFiveQueries as |query|}}
<td class="Query {{query.className}}">
    {{query.formatElapsed}}
    <div class="popover left">
        <div class="popover-content">{{query.query}}</div>
        <div class="arrow"></div>
    </div>
</td>
{{/each}}

Time for rerendering ms: 85~90 screen shot 2016-11-30 at 07 20 22

Sample #3

Ember ver: 2.9.1 Description: Rendering everything in application.hbs

Time for rerendering ms: 78~85 screen shot 2016-11-30 at 07 24 21

Sample #4

Ember ver: 2.9.1 Description: Rendering everything in application.jbs and using key=“@index” in each helper for top 5 queries Time for rerendering ms: 34~38 screen shot 2016-11-30 at 07 34 10 Commit: most performant no components and key · chilicoder/js-repaint-perfs-ember@983a21b · GitHub

Sample #5

Ember ver: 2.9.1 Description: Same as sample #1 (using two components) but using key=“@index” in each helper for top 5 queries Time for rerendering ms: ~50 screen shot 2016-11-30 at 07 56 12 Commit: two components with key=@index · chilicoder/js-repaint-perfs-ember@673397e · GitHub

Thus, on my computer, I got ~33 FPS for Ember 2.9.1 (React ~50) which is good, I think.

For future work will try 2.10-beta with Glimmer2