How do you time transitions between routes?


#1

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?


#2

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.