プログラミング

User Timing API を使って、特定の処理に掛かった時間を計測する

投稿日:2020年12月23日 更新日:

1. User Timing API について

User Timing Level 2 というAPIを使うと、特定の処理 (JavaScript) に掛かった時間を計測することができます。

このAPIを使ったサンプルコードを紹介します。

2. サンプルコード

このサンプルコードでは、do_something() という関数の実行に掛かる時間を計測しており、結果は ブラウザの開発者ツールの Console パネルに出力されます。

// 計測開始
// PerformanceMarkオブジェクトを生成する。"startTask1" という名前を付けておく。
performance.mark("startTask1");

// 何らかの重い処理を実行する
do_something();

// 計測終了
// PerformanceMarkオブジェクトを生成する。"endTask1" という名前を付けておく。
performance.mark("endTask1");

// measure() を実行して PerformanceMeasure オブジェクトを生成する
// 第1引数:このオブジェクトの名前
// 第2引数:開始地点のPerformanceMarkオブジェクトの名前
// 第3引数:終了地点のPerformanceMarkオブジェクトの名前
performance.measure('Task1', 'startTask1', 'endTask1');
// 生成したオブジェクトを取得する
// 第1引数:PerformanceMeasureオブジェクトの名前
// 第2引数:entryType('measure' を指定する)
console.log(performance.getEntriesByName('Task1', 'measure'));
  • performance.getEntriesByName('Task1', 'measure') の戻り値は、PerformanceMeasure オブジェクトの配列であり、通常はその中の1つ目が目的のオブジェクトのはず。この1つ目のオブジェクトの duration プロパティに、掛かった時間がセットされています(下の画面を参照)。
結果出力の例 (DevTools の Console パネル)

3. デモページ

4. 参考

仕様

MDN

ブラウザの対応状況

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

Web Development for Beginners を読む:レッスン15, 16, 17

目次1. はじめに2. Part1: イントロダクション「継承」と「コンポジション」Pub/Sub パターン3. Part 2: canvas にヒーローとモンスターを描く4. Part 3: 動きを …

JavaScript でスロットマシーンを作ってみました(3回目)

「JavaScript でスロットマシーンを作ってみる」の3回目です。 今回は ゲームっぽくしてみました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. …

Python

Pythonのバージョンを切り替える pyenv の使い方

Pythonのバージョンを切り替える pyenv の使い方について説明します。

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …