ember-perf
Package | Ember Versions | Version | Status |
---|---|---|---|
ember-perf |
1.10 , 1.11 , 1.12 , 1.13 |
||
ember-perf-handlebars |
1.5 , 1.6 , 1.7 , 1.8 , 1.9 |
Page load performance instrumentation for ember.js apps
Setup
# Ember.js < 1.10 ember install ember-perf-handlebars# Ember.js >= 1.10 ember install ember-perf
Responding to performance events
Transition Events
First, create an initializer, which will set up an event listener to monitor performance events
ember g ember-perf-initializer monitor-perf
This will create files for you called
- app/initializers/monitor-perf.js
- app/instance-initializers/monitor-perf.js
You then need to go to the instance intializer and fill in the body of the event listener with something useful (i.e., sending the performance data somewhere).
perfService;
Render Events
To track render performance within a single route (i.e. how long did it take for an action triggered rerender to complete), you would use the measureRender
method.
// app/components/x-foo.jsComponent;
You can also use the renderComplete
event on the service from app/instance-initializers/monitor-perf.js
:
perfService;
transitionData
object look like?
What does this Here's an example
"destURL": "/" "destRoute": "index" "startTime": 40285299999959534 "endTime": 42716400000063004 "routes": "name": "application" "debugContainerKey": "route:application" "startTime": 40878300000076706 "views": "endTime": 4138860000002751 "elapsedTime": 5102999999508029 "name": "index" "debugContainerKey": "route:index" "startTime": 41529199999968114 "views": 0 1 2 // references to viewData array (by index) "endTime": 41811000000052445 "elapsedTime": 28180000008433126 "viewData": "startTime": 4316899999994348 "id": "ember341" "containerKey": "view:-outlet" "endTime": 46419799999966926 "elapsedTime": 3250800000023446 "startTime": 43875200000002224 "id": "ember347" "containerKey": "view:toplevel" "parentViewId": "ember341" "endTime": 4639900000001944 "elapsedTime": 2523800000017218 "startTime": 4505559999997786 "id": "ember365" "containerKey": "component:-link-to" "parentViewId": "ember347" "endTime": 46354000000064843 "elapsedTime": 12984000000869855 "elapsedTime": 243110000010347
Configuration
This addon can be configured in your config/environment.js file
if environment === 'development' // Log transition performance ENVemberPerf = debugMode: true ;
- debugMode (default:
false
) - Logs transition performance to the browser console
Developer Installation
git clone
this repositorynpm install
bower install
Running
npm run tryver <EMBER_TRY_SCENARIO> s
(for example,npm run tryver ember-1.8 s
)- Visit your app at http://localhost:4200.
Running Tests
npm run tryver <EMBER_TRY_SCENARIO>
(for example,npm run tryver ember-1.8
)npm run tryver <EMBER_TRY_SCENARIO> test --server
(for example,npm run tryver ember-1.8 test --server
)
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.