Measuring performance and understanding user navigation through javascript

Measuring performance and understanding user navigation is supported by most of the browsers now natively through their implementations of “Navigation & Timing” W3C spec. It doesn’t need any additional library.

For example: The below code snippets work correctly on both IE(tested on version is 11.x) and Chrome (tested on 40.x).

Measure page load time.

var perfData = window.performance.timing;

var pageLoadTime = perfData.loadEventEnd – perfData.navigationStart;

Measure request response time.

var connectTime = perfData.responseEnd – perfData.requestStart;

Several other metrics can be captured directly using the window.performance object ex: window.performance.memory returns information about memory consumption of the page, window.performance.navigation.type tells if a page load is triggered by a redirect, back/forward button or normal URL load.

Measure Ajax Requests

app.render = function(content){ 
myEl.innerHTML = content; window.performance.mark('end_render'); 
window.performance.measure('measure_render', 'start_xhr', 'end_render'); 
};
var req= new XMLHttpRequest(); 
req.open('GET', url, true); 
req.onload = function(e) { window.performance.mark('end_xhr'); window.performance.measure('measure_xhr', 'start_xhr', 'end_xhr'); app.render(e.responseText); } 
window.performance.mark('start_xhr'); 
myReq.send();

Measure Custom events

Very similar to measuring Ajax Requests using mark and measure.

More information Here: