I've been working on performance tuning an Ember.js app recently and one of the tricks I learned while hunting through ember.js - the go-to for Ember developers when they need to figure something out - is how to time the rendering of handlebars views. I am going to show a couple of code snippets, and then I am out - this post is going to be short and sweet.
The basic construct used is Ember.subscribe, which is used as follows
Ember.subscribe("render", {
before: function(name, timestamp, payload) {
},
after: function(name, timestamp, payload) {
}
});
The purpose of the Ember Instrumentation module is to provide efficient, general-purpose instrumentation for Ember.
After finding this it then took a little bit of experimentation to figure out that the template name can be retrieved from the payload as payload.template. Also, if you return a object from the before hook, it becomes the fourth parameter in your after hook, which is convinient for passing in beginning timestamp.
So, to see the time took to render any of the templates you might do this.
Ember.subscribe('render', {
before: function(name, start, payload){
return start
},
after: function(name, end, payload, start){
var duration = Math.round(end - start)
var template = payload.template
if (template){ // this is to filter out anonymous templates
console.log('rendered', template, 'took', duration, 'ms')
}
}
})
However, I get still way too much noise this way, so what I ended up doing when optimizing a specific view is to filter the output by the name of the view:
if (template === 'mytemplate'){
console.log('rendered', template, 'took', duration, 'ms')
}