以下のようなUIインタラクション時間を計測したいです。
- メニューが選択されてから結果が表示されるまでの時間。
- ユーザーが文字を入力してから UI に文字を表示するまでの時間
多くの人が関数呼び出しと結果の間の時間を測定することを提案していると思いますが、UI が変更されても時間を取得する別の方法を知りたいです。UIの変更時期を確認することはできますか?
私が開発しているツールは Javascript で作成され、ブラウザ上で動作します。
以下のようなUIインタラクション時間を計測したいです。
多くの人が関数呼び出しと結果の間の時間を測定することを提案していると思いますが、UI が変更されても時間を取得する別の方法を知りたいです。UIの変更時期を確認することはできますか?
私が開発しているツールは Javascript で作成され、ブラウザ上で動作します。
これが私の答えです:
「Javascript はシングル スレッドです」。
それで、これはどういう意味ですか:
Javascript はコードを順次実行します。マルチスレッドをサポートしていないため、2 つの異なる Javascript コードを同時に実行することはできません。
JavaScript コードの実行は行ごとに行われるため、複数行を同時に実行することはできません (非常に小さいですが)。
簡単な解決策:
check_my_time_first() ;//these will be functions returning the epoch time
check_my_time_after();
console.log,flag 変数と epoch timeだけが必要です。
まず、その差は非常に小さくなります。
var milliseconds_before = (new Date).getTime();//use this code when user clicks
var milliseconds_after = (new Date).getTime();//use this when result appears.
フラグ変数を使用して、実行がいつ完了したかを知ることができます。
もう一つの例:
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)
}
}
違い:
var diff=milliseconds_before - milliseconds_after;
このコードをスマートに配置すると、時間の違いがわかります。
重要なことは、基本を理解することです。私の答えが役に立てば幸いです。