Home

Awesome

ember-perf

Greenkeeper badge

Ember Observer Score Dependency Status devDependency Status Code Climate

PackageEmber VersionsVersionStatus
ember-perf1.11 - 1.13, 2.4-lts, 2.8-lts, 2.12.2, Release, Betanpm versionBuild Status

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

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
    };
}

TransitionPerformance

Warning

*Ember 2.3 doesn't work with ember-perf.

Developer Installation

Running

Running the app using an ember-try scenario

Running Tests

All Supported Ember Versions

Individual Ember Versions

Reset Dependencies

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

For more information on using ember-cli, visit http://www.ember-cli.com/.

Analytics