How do you time transitions between routes?


I want to gather timing data for my route transitions. For example, if a user is on the /posts page, and transitions to the /favourites page, I’d like to capture the time between the time the transition begins and the time it ends, including model load time and rendering.

I thought about something like:

willTransition: function (transition) {
    var startTime = +new Date();
    transition.then(function () { console.log("Took " + (+new Date() - startTime)) });

but the times I’m getting are suspiciously short, and don’t appear to reflect the model load time.

Any thoughts?


If you want to time the model load time start and stop a timer at the model hook and at the afterModel hook. Depending on what you are using (ember model/ember data) it returns a partial model that’s populated once the find is finished. You can also hook up to isLoaded on the model to see when the model was truly loaded.