Help needed with js-repaint-perf for Ember update

Performance
1

Hi guys. I checked this popular performance comparing:

and found out that ember there is pretty outdated (somewhere Ember 1.10 or so) I tried to put their code in recent Ember-CLI (version 2.9.1) expecting to see some better numbers, but the numbers were still bad (around 1.5 frames per sec)

Can somebody help me with identifying of weak places? I put my code here

2

@chilicoder if you’re trying to profile Glimmer2, you should use a beta release of 2.10. 2.9 is the same rendering engine as Ember 1.13. Be sure you’re using a production build as well, development builds are known to be much slower.

3

Glancing at the implementation, there is also a bunch of pretty ugly stuff in there. I’m not sure you will even get very great numbers out of that implementation. I might suggest looking at GitHub - wycats/dbmonster: A demo of dbmon running on the idempotent-rerender branches of Ember and HTMLBars for some better ideas around how to build the content.

4

@mixonic thank for tip about glimmer2.

Acctually, I’m trying to see something that was shown in EmberConf2015

I tried to build production as well. I think the code itself is far from perfect.

5

Completely agree! I did only sort of “smart” copy-paste from the repo https://github.com/mathieuancelin/js-repaint-perfs/blob/gh-pages/ember/app.js

Any clues about approaches how to improve?

6

Ok. I combined wycat/dbmon repo with my (because @wycats`s repo is old and can’t be built with current versions of npm/ember-cli ) For the reference its commit hash 3926b330ff45ed6c8e5bae9373757ba8bf8215fd.

I’ve got 12-15 fps with prod version (twice less with dev) against 40-50 fps for react version. Its better than 1-2 but still less.

Any Ideas how can I Improve more?

Another issue is that wycat builds data by his own and doesn’t use ENV.generateData function with mutation property. So, its different data generating process. For now, I failed to incorporate ENV.generateData function, but will keep fighting)

7

GitHub - cafreeman/ember-dbmon: Dbmon in Ember 2.10-beta w/ Glimmer 2 is another version that was just updated/published a day or two ago. It is built against Ember 2.10-beta.

1 Like
8

Checked deployed version http://ember-glimmer-dbmon.surge.sh

also 12-15 fps so far.

conceptually same code. there are several computed properties in the component, that i guess can be revised

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

10

Ok. It appeared that 2.10 with glimmer 2 released, so it was quite easy to check.

Sample #6

Ember ver: 2.10 Description: Same as Sample #4 but using Ember 2.10 Time for rerendering ms: 20~25 :tada: screen shot 2016-11-30 at 09 14 56 Commit: using ember 2.10 · chilicoder/js-repaint-perfs-ember@8e82c09 · GitHub

Sample #7

Ember ver: 2.10 Description: Same as sample #5 but using Ember 2.10 Time for rerendering ms: 30~34 screen shot 2016-11-30 at 09 17 16

Thus, sample #6 shows basically the same performance as React (~50 FPS) :tada: Here is the working demo: http://js-repaint-perf-ember.surge.sh/

Also, it has very similar implementation as react example (js-repaint-perfs/app.js at gh-pages · mathieuancelin/js-repaint-perfs · GitHub)

UPDATE: Created a PR for the benchmark repo Ember version updated from 1.10 to 2.10 by chilicoder · Pull Request #97 · mathieuancelin/js-repaint-perfs · GitHub

1 Like
11

Hooraayhh! PR is merged http://mathieuancelin.github.io/js-repaint-perfs/ember/

Finally, we fixed this benchmark. Thanks @mixonic for you support!

1 Like