Skip to content

Add performance information to Chrome's Timeline for Ember applications

License

Notifications You must be signed in to change notification settings

ember-best-practices/ember-perf-timeline

Repository files navigation

ember-perf-timeline Build Status

Add performance information to Chrome's Timeline for Ember applications.

Currently this addon provides information for Component and {{outlet}} render, although more support can (and should) be added in the future.

timeline example

Warning: Running with the profiler and instrumentation enabled will itself impede performance itself. Also, be sure to test in production mode or all the development mode assertions will affect performance as well.

Installation

  • ember install ember-perf-timeline

Usage

  1. Add _ember-perf-timeline=true to the queryString of your URL.
  2. Record a timeline (using either timeline tab or performance tab in Chrome).

Note: If the query param is not set, the addon will not impact your app's performance, and can be left installed for production. Additionally, if the query param is set, the instrumentation overhead may be non-trivial.

Configuration

The _ember-perf-timeline query param can be either true or a , separated list. For example, ?_ember-perf-timeline=render.component,render.outlet will enable instrumentation for render.component and render.outlet but ignoring other available instrumentations. ?_ember-perf-timeline=true will enable all available instrumentations.

You can also configure your app's environment to always enable instrumentations in development mode. This can prevent route transitions clearing the queryParam.

module.exports = function(environment) {
  let ENV = {
    // ...
  };

  if (environment === 'development') {
    ENV.emberPerfTimeline = {
      renderComponent: true,
      renderOutlet: true,
      renderGetComponentDefinition: true
    }
  }

  if (environment === 'production') {
  }

  return ENV;
};

Containment

Times for a given component include its own time and those of its children. For the following example, the parent component took a total of 6 ms, which includes the 1.5ms of the child:

containment example

Example

  1. Run ember s in this repo.
  2. Visit http://localhost:4200/?_ember-perf-timeline=true.
  3. Open "Timeline" or "Performace" tab in the Chrome Developer Tools.
  4. Record a timeline.
  5. You will see something like:

update and create of components on render

What else can you do?

  1. You can search by the name of your component:

timeline search

  1. You can search for both $beforeRenderComponent and $afterRenderComponent, to find the bounds of component renderings within the flame graph:

searched keywords may be hard to find

Note: Searching is limited to the visibile portion of the timeline.

Developement

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

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

About

Add performance information to Chrome's Timeline for Ember applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published