Awesome
ember-perf
Package | Ember Versions | Version | Status |
---|---|---|---|
ember-perf | 1.11 - 1.13 , 2.4-lts , 2.8-lts , 2.12.2 , Release , Beta |
Page load performance instrumentation for ember.js apps
Setup
# Ember.js >= 1.11
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.on('transitionComplete', transitionData => {
// DO SOMETHING WITH TRANSITION DATA
});
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.js
export default Ember.Component.extend({
emberPerf: Ember.inject.service(),
actions: {
measureStuff() {
const perf = this.get('emberPerf');
perf.measureRender()
.then(function(result) {
// do things with the result
});
}
}
});
You can also use the renderComplete
event on the service from app/instance-initializers/monitor-perf.js
:
perfService.on('renderComplete', renderData => {
// Do awesome things!
});
What does this transitionData
object look like?
Here's an example
{
"destURL": "/",
"destRoute": "index",
"startTime": 402.85299999959534,
"endTime": 427.16400000063004,
"routes": [{
"name": "application",
"debugContainerKey": "route:application",
"startTime": 408.78300000076706,
"views": [],
"endTime": 413.8860000002751,
"elapsedTime": 5.102999999508029
}, {
"name": "index",
"debugContainerKey": "route:index",
"startTime": 415.29199999968114,
"views": [0, 1, 2], // references to viewData array (by index)
"endTime": 418.11000000052445,
"elapsedTime": 2.8180000008433126
}],
"viewData": [{
"startTime": 431.6899999994348,
"id": "ember341",
"containerKey": "view:-outlet",
"endTime": 464.19799999966926,
"elapsedTime": 32.50800000023446
}, {
"startTime": 438.75200000002224,
"id": "ember347",
"containerKey": "view:toplevel",
"parentViewId": "ember341",
"endTime": 463.9900000001944,
"elapsedTime": 25.23800000017218
}, {
"startTime": 450.5559999997786,
"id": "ember365",
"containerKey": "component:-link-to",
"parentViewId": "ember347",
"endTime": 463.54000000064843,
"elapsedTime": 12.984000000869855
}],
"elapsedTime": 24.3110000010347
}
Configuration
This addon can be configured in your config/environment.js file
if (environment === 'development') {
// Log transition performance
ENV.emberPerf = {
debugMode: true
};
}
- debugMode (default:
false
) - Logs transition performance to the browser console
Warning
*Ember 2.3 doesn't work with ember-perf
.
Developer Installation
git clone
this repositorynpm install
bower install
Running
Running the app using an ember-try scenario
ember try:one <EMBER_TRY_SCENARIO> --- ember serve
( for exampleember try:one ember-2.4 --- ember serve
)- Visit the app at http://localhost:4200.
Running Tests
All Supported Ember Versions
npm test
Individual Ember Versions
ember try:one <EMBER_TRY_SCENARIO>
(for example,ember try:one ember-2.4
)ember try:one <EMBER_TRY_SCENARIO> --- ember test --server
(for example,ember try:one ember-2.4 --- ember test --server
)
Reset Dependencies
ember try:reset
This command restores the original bower.json from bower.json.ember-try, rm -rfs bower_components and runs bower install. For use if any of the other commands fail to clean up after (they run this by default on completion).
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.