Render Timing

components.render-timer.js

import Ember from 'ember';

const {
  Component
} = Ember;

export default Component.extend({
  willRender() {
    this.set('timerStart', new Date());
  },
  didRender() {
    this.get('onRender')(new Date() - this.get('timerStart'));
  }
});

controllers.application.js

import Ember from 'ember';

const {
  Controller
} = Ember;

export default Controller.extend({
  renderMessage: Ember.computed('renderSpeed', function() {
    let speed = this.get('renderSpeed');
    if (speed != null) {
      return speed + 'ms';
    } else {
      return "(not yet rendered)";
    }
  })
});

templates.application.hbs

<p>Last render took: {{renderMessage}}</p>
{{#if rendered}}
  <button {{action (mut rendered) false}}>Reset</button>
  {{#render-timer onRender=(action (mut renderSpeed))}}
    Hello World
  {{/render-timer}}
{{else}}
  <button {{action (mut rendered) true}}>Go</button>
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}