How to monitor JavaScript performanceThere’s an easy way to determine if your JavaScript is inefficiently written. There’s no need to instrument every JavaScript function with code that logs timings and then analyze log files.

With the use of W3C User Timing API’s use of “marks” as well as some creative JavaScript -ing, this can be done with minimal code. This article will discuss how to do this.

 

W3C User Timing API’s – The W3C User Timing API is typically used in conjunction with W3C Navigation Timing API. The Navigation Timing API obtains exact latency measurements from the browser. You can read about it here http://www.w3.org/TR/navigation-timing/. It will measure all tasks of a page load such as redirection, app cache, DNS, TCP, request, response, processing, onLoad, unload.

In modern sites, page load is uninteresting and what we care about is the JavaScript that is executed ‘after’ the page load.  This is where the W3C User Timing API comes in handy. You can read about it here http://www.w3.org/TR/user-timing/.  As you can see, with the use of “marks and measures” one can get an accurate estimate of how long JavaScript is taking to execute.

To very simply explain how you use the marks and measures, you put a begin mark at the beginning of the code you wish to measure, and end and measure marks at the end of the code you wish to measure. Here’s an example:

performance.mark("start_JavascriptFunctionABC");

… your code …

performance.mark(“end_JavascriptFunctionABC”);  performance.measure(‘measure_JavascriptFunctionABC’,’start_JavascriptFunctionABC’,’end_JavascriptFunctionABC’);

Creative JavaScript-ing – But who wants to have put marks and measures in all of their JavaScript functions? That is tedious, and after measurements are obtained, they will need to be turned off or removed somehow.  There is an easier way. With some creative JavaScript-ing, we can instrument and enhance all JavaScript functions with the marks and measures.

Use the window object to obtain all functions on the page. Simply test that the type of the window object equals ‘function’.   Then use the JavaScript “apply” function to wrap the functions found on the page by first applying a function that inserts the start marks, then applying the original function, then applying a function that inserts the end and measure marks.

Reporting on timing results – So now that we have the ability to easily capture our timings, how do we report on them? There are a couple of options. We can log the results to a log file. The positive about this method is that it is easy and requires no setup. The negative is that it will be difficult to analyze the results. Another option is to stream the results to a database. This, however will require database setup and code must be written to stream the data. However, once the timing results are in a database, they can be analyzed with the use of queries.

Things to Consider – There are some things to consider with the automatic marking of JavaScript functions. First, this method will mark “every” JavaScript function on the page, even those you don’t want to measure.  So you may wish to create an array of functions you either want to measure or of functions you don’t want to measure and test for them prior to applying the marking scripts. Another thing to consider is that if you want to measure asynchronous calls where the start of the call is in one function and the response is in a different function, this method will not work and you will need to mark the functions manually.

Analyzing results with Nastel AutoPilot Insight AutoPilot Insight offers an end user monitoring plugin that incorporates all of what is discussed in this article. It is here: https://github.com/Nastel/jkool-rum-plugin. By simply importing the JavaScript plugin into your website, and filling in some required fields, you will be setup to asynchronously stream your timings into your Nastel repository.

The Nastel User Interface makes it very easy to analyze your performance data. It even has a prebuilt dashboard devoted to the analysis of your performance data. The plugin uses both the User Timing and the Navigation Timing API’s.  So in just a few minutes you can have your page load timings and JavaScript function timings streaming to Nastel and begin analyzing your site’s performance data.