Help needed with js-repaint-perf for Ember update


#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 https://github.com/wycats/dbmonster 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

https://github.com/cafreeman/ember-dbmon is another version that was just updated/published a day or two ago. It is built against Ember 2.10-beta.


#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

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

Sample #3

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

Time for rerendering ms: 78~85

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

Commit: https://github.com/chilicoder/js-repaint-perfs-ember/commit/983a21b29b9db9cbf5a455dd474af4dda561d054

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

Commit: https://github.com/chilicoder/js-repaint-perfs-ember/commit/673397e0affa2d28f9b68cd041cc2d0e4679e3bc

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


Computed.sort 10 times slower than sortBy
#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:

Commit: https://github.com/chilicoder/js-repaint-perfs-ember/commit/8e82c0916c9fe340cd34cd9bd12f531ffe8808a4

Sample #7

Ember ver: 2.10 Description: Same as sample #5 but using Ember 2.10 Time for rerendering ms: 30~34

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 (https://github.com/mathieuancelin/js-repaint-perfs/blob/gh-pages/react/app.js)

UPDATE: Created a PR for the benchmark repo https://github.com/mathieuancelin/js-repaint-perfs/pull/97


#11

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

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