JavaScript API

JavaScript API

Introduction

This micro-library allows you to gather performance timing data for your webapps and websites by exposing an easy to use API leveraging Navigation Timing and High Resolution Time for the browsers that support them. The intended use is to gather the data using the API and then log it to your server for later analysis. Since the actual logging is most likely application-specific, it is not part of this library. However, since Underscore is a dependency, you can easily extend this library to add on your own method, including those for logging.

Usage through sample code

Navigation Timing Page Load Timing Data methods:

frontendPerformanceData.getNetworkLatency(); // fetchStart to responseEnd
frontendPerformanceData.getProcessingLoadTime(); // responseEnd (or pageStart for older browsers) to loadEventEnd
frontendPerformanceData.getFullRequestLoadTime(); // navigationStart to loadEventEnd

// Note that if you want to use the above methods as soon as the page load event fires,
// you'll have to wrap that in a setTimeout call so that the load event can fire first:
$(window).load(function() {
  setTimeout(function() {
    console.log(
      'Network Latency:', frontendPerformanceData.getNetworkLatency(),
      'Processing:', frontendPerformanceData.getProcessingLoadTime(),
      'Full Request:', frontendPerformanceData.getFullRequestLoadTime()
    );
  }, 0);
});

Custom Key/Value Data Store

// store a custom key/value
frontendPerformanceData.setCustom('customKey', 'custom value');

// retrieve the custom key's value
frontendPerformanceData.getCustom('customKey');

Duration from the page load event to a specific event

// mark a spot in time as significant
frontendPerformanceData.mark('foo');

// console.log the difference between that significant event and when the loadEventEnd event fired
console.log("loadEventEnd to foo delta:", frontendPerformanceData.getMark('foo') -
frontendPerformanceData.getTimingMark('loadEventEnd', 'HighRes'));

Duration of a specific event

// mark the start of some significant process
frontendPerformanceData.eventStart('bar');
// mark the end of some significant process
frontendPerformanceData.eventEnd('bar');
// get the duration of that significant process
frontendPerformanceData.eventDuration('bar');

Clear the specific event data

frontendPerformanceData.resetEvent('bar');

Duration of a specific event (e.g. AJAX call using Backbone fetch) with additional options

var collection = new Backbone.Collection;
collection.url = '/get-data/';

// mark the start of the AJAX call
frontendPerformanceData.eventStart('getData');
collection.fetch({
  success: function(collection) {
    // mark the end of the AJAX call, set its status to 'success' and the number of items returned as 'items'
    frontendPerformanceData.eventEnd('getData', {status:'success', items: collection.length});
  },
  error: function() {
    // mark the end of the AJAX call, set its status to 'error'
    frontendPerformanceData.eventEnd('getData', {status:'error'});
  },
});

// And then when you're ready, retrieve the data
frontendPerformanceData.eventDuration('getData', {decimalPlaces:2}); // duration of AJAX call, accurate to 2 decimal places
frontendPerformanceData.getEventData('getData', 'status'); // status of AJAX call
frontendPerformanceData.getEventData('getData', 'items'); // number of items returned