In UX development, a lot of attention is given to page load or application loading. There are several method to calculate the page load time, the most commonly used method is by finding the difference of the start time and the end time using the Javascript new Date().getTime(). However, this Javascript Time is not accurate, find out why its not here. But it does provides a time which is approximate. With the introduction of HTML5, a new window method window.performance.timing has been introduced, which is incredible. Why I said incredible? See it by yourself by following the steps,

Open your Chrome browser

Go to any website or your website or application.

Click button F12 or right click and select ‘Inspect element’ to open the Chrome developer tools.

Once the developer tools is enabled, select the tab ‘Console’

There you could see a blue > icon, click there and you will be able to enter text there.

Now type window.performance.timing and hit enter.

If you have done the steps above correctly you would see a screen as shown below,

That’s seriously a huge set of information; you could read more about this here.

This window.performance.timing is extremely good to profiling multipage application. You could track when the page rendered completed, the time take for the requests etc. But this doesn’t work for single page application (SPA). The reason is that this window.performance.timing method is being refreshed when a new page is hit, but for SPA’s its only one main page, and remaining are like cards handled with in them.

I could not find any existing solution online, hence decided to workout one at least to calculate the time taken to fetch the data from the server. I could achieve this by overriding the Backbone Collection.fetch().

Backbone Collection

Collections are ordered sets of models. You can bind “change” events to be notified when any model in the collection has been modified, listen for “add” and “remove” events, fetch the collection from the server, and use a full suite of Underscore.js methods.

Above is the definition of Backbone Collection from their official website. Backbone Collections fetch() is the method that loads remote data and binds to the view template.

If you notice the above code the collection.fetch() internally calls the jQuery $.get(). Hence while calling the fetch you need to specify the params and the callback for executing the $.get(). The fetch options are,

data

Type of Object, which is the query params to be sent to the service. Accepts empty {} in case there is no params.

One fetch for all Collections
If your project have multiple collections, then writing $.get() in each collection is not recommended because it will end up in you managing too many codes. We could write a common function that could be used across all the collections in your application.

Conclusion
As I have mentioned earlier, ‘this is not an elegant solution‘. But, this will be useful when we are left with no better solutions. I’m working on, to find even better solution but if you have a better solution for this case, please to write to me.