How to measure client side performance in single page application

Question

We developed a complex single page application based on Sencha Ext.JS framework. There are many "pages" in the application that are changing dynamically without refreshing the browser's URL. All the user's interaction and content changing is dynamically created and destroyed.

We now want to measure client side stability and performance along time. The test should focus on client side behavior and responsiveness. We don't need to test the server side response time - it will be same response time for granted during the test.

All the tools that I saw that exists are usually dealing with the XHR response time and usually based on load time per URL which is not relevant on our case - because the same url is continuing and doing work along time.

Any suggestion for a good practice and tools for this kind of test?

Answer 1

If you think that AJAX monitoring and page load time will not help you, then I can suggest that you can use Transaction monitoring. It can simply done by measuring time between two states or two pages.

To test locally, using console.time:

  console.time('page_name'); 
  // Anything goes here
  console.timeEnd('page_name');

Using performance.now

 var start = window.performance.now();
 ...
 var end = window.performance.now();
 var time = end - start;

Using Atatus service

If you are looking for service, you can try https://www.atatus.com/ which helps you to measure between transactions in real time.

In atatus, you can measure between transactions or states by

 atatus.beginTransaction("page_name");
 ...
 atatus.endTransaction("page_name");

Answer 2

You can use a tool like Selenium to automate client behaviour and measure the response time.