How to measure User Interaction time of UI, menu made by Javascript?

Question

I want to measure UI interaction time like following.

1. Time between Menu selected and showing result.
2. Time between User typing & showing letters in UI

I think many people suggest me to measure the time between function call & result, but I want to know another way to get the time though UI changes. Is it possible to check the time for UI changes ?

The tool what I'm developing is made by Javascript and run on Browser.

Answer 1

Here is my answer:

"Javascript is single threaded".

So,what does this means:

Javascript runs code sequentially.It is not possible to run two different pieces of Javascript code at the same time because it does not support multithreading.

Execution of javascript code is line by line.So execution of multiple lines at same time is not possible(it will be very small though)

A simple solution:

check_my_time_first() ;//these will be functions returning the epoch time
check_my_time_after();

You just need console.log,flag variables and epoch time.

Firstly,the difference will be ultra small.

var milliseconds_before = (new Date).getTime();//use this code when user clicks

var milliseconds_after = (new Date).getTime();//use this when result appears.

Make use of flag variables to know when some execution has been completed.

Another example:

var execution_over=false;
function doSomething(){
console.log("start_time"+milliseconds_before)
//some code to be executed;

execution_over=true

if(execution_over==true){
console.log("time="+milliseconds_after)
   }
}

Difference:

 var diff=milliseconds_before - milliseconds_after;

Place this code smartly and you will see the difference in time.

The important thing is to understand the fundamentals.I hope my answer helped.