ユーザータイミングマークと測定は、ほとんどの最新ブラウザで利用できるパフォーマンス関連の機能です。これらを使用することで、ウェブページやアプリがユーザーによってどのように使用されているかに関するデータを収集し、 ウェブサイトのパフォーマンスを最適化するのに。
ユーザータイミングマークは、コード内の特定のポイントをマークするために使用され、その後、ユーザータイミングによって測定されます。これにより、コード内のボトルネックが発生している場所を特定するのに役立ちます。例えば、ユーザータイミングマークを使用して JavaScript ファイルの開始位置をマークし、その後、ユーザータイミング測定を使用して、そのファイルの読み込みにかかった時間を確認できます。
ユーザータイミング測定は、2つのユーザータイミングマーク間の時間を測定します。これは、特定のコード部分のパフォーマンスを測定するのに役立ちます。例えば、特定の AJAX リクエストが完了するまでにかかった時間を確認するために、ユーザータイミング測定を使用できます。
をご覧ください W3C Web サイト。
ユーザータイミングマークとは何ですか?
ユーザータイミングマークとユーザータイミングメジャーの2つは、Webアプリケーションの問題を特定し、最適化するために使用できるパフォーマンスメトリックです。ユーザータイミングマークは、2つのイベント間の時間やイベントの完了時間を測定できます。ユーザータイミングメジャーは、イベントの継続時間や、一定期間内に発生したイベントの数を測定できます。.
ユーザータイミングマークを追加するにはどうすればいいですか?
ユーザータイミングのマークと測定を追加すると、ウェブページのパフォーマンスに関する洞察を得るのに非常に役立ちます。ユーザータイミングを使用すると、ユーザーがボタンやリンクをクリックするなど、ページ上の特定のイベントにかかる時間を追跡できます。.
ユーザータイミングマークと小節を追加するには、まず新しいJavaScriptファイルを作成する必要があります。次に、ファイルに以下のコードを追加します。
var startTime = Date.now();
関数doSomething() {
var endTime = Date.now();
var timeTaken = 終了時間 – 開始時間;
console.log('関数 doSomething の実行には ' + timeTaken + ' ミリ秒かかりました。');
}
上記のコードを使うと、関数「do Something」の実行にかかる時間を追跡できます。この手法は、ページ上の他のイベントを追跡するのにも使用できます。追跡するには、上記のコード内の関数名を追跡したいイベント名に置き換えてください。.
コードに時間をマークするためのヒント
1. コード内で何かが発生するまでの時間を測定したい場合は、 performance.now() メソッドを使用できます。これにより、1000分の1ミリ秒単位の正確なタイムスタンプが得られます。
2. それほど高い精度が必要ない場合は、Date.now() メソッドを使用することもできます。.
3. 特定の単位 (秒、分など) で何かにかかる時間を測定する場合は、performance.mark() メソッドと performance.measure() メソッドを使用できます。.
4. 最後に、コード内で何が起こっているか、各部分の実行にどれくらいの時間がかかったかを詳しく知りたい場合は、User Timing API の mark() メソッドと measure() メソッドを使用できます。.
結論
User Timing APIは、ユーザーがWebアプリケーションをどのように利用しているかを把握するのに最適な方法です。マークとメジャーを使用することで、特定のイベントとタイミング情報を追跡し、ボトルネックや問題が発生する可能性のある箇所を特定できます。さらに、User Timing APIは、ユーザーエクスペリエンス全体の改善に役立つパフォーマンスデータを収集するためにも使用できます。.
