Skip to content

mike-north/ember-perf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d5f9c9c · Feb 24, 2025
Jan 3, 2018
Jan 3, 2018
Jan 3, 2018
May 24, 2017
Nov 11, 2018
Nov 11, 2018
Nov 11, 2018
Jul 24, 2015
May 24, 2017
Jul 24, 2015
Nov 11, 2018
Nov 11, 2018
Nov 11, 2018
Jun 2, 2016
Nov 11, 2018
Jan 3, 2018
Nov 11, 2018
Nov 11, 2018
Jun 11, 2016
Jul 24, 2015
Jun 19, 2017
Jan 3, 2018
Nov 11, 2018
Jan 3, 2018
Jul 27, 2015
Sep 26, 2024
Nov 11, 2018
Nov 11, 2018
Feb 24, 2025

Repository files navigation

ember-perf

Greenkeeper badge

Ember Observer Score Dependency Status devDependency Status Code Climate

Package Ember Versions Version Status
ember-perf 1.11 - 1.13, 2.4-lts, 2.8-lts, 2.12.2, Release, Beta npm version Build 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

  • 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

TransitionPerformance

Warning

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

Developer Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running the app using an ember-try scenario

  • ember try:one <EMBER_TRY_SCENARIO> --- ember serve ( for example ember 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/.

Analytics