How to measure client-side performance in a single-page application

Question

We have developed a comprehensive single-page application based on Sencha Ext.JS. There are many “pages” in the application that change dynamically without updating the browser URL. All user interaction and content changes are dynamically created and destroyed.

Now we want to measure the stability and performance of the client side. The test should be customer-oriented behavior and responsiveness. We do not need to check the response time on the server side - this will be the response time provided during the test.

All the tools that I saw that exist usually deal with XHR response time and are usually based on load time for each URL, which is not relevant to our case, because the same URL continues and does the work in time .

Any suggestion for good practice and tools for such a test?

Answer 1

If you think that monitoring AJAX and page loading time will not help you, I can suggest you use transaction monitoring. This can simply be done by measuring the time between two states or two pages.

Check locally usingconsole.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;

Atatus

, https://www.atatus.com/, .

atatus

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

Answer 2

, Selenium, .