プログラミング

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

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

関連記事

QRコードの画像ファイルから内容を読み取るWebページを作りました

目次1. はじめに2. スクリーンショット3. URL4. 操作と内容5. ソースコード6. 参考情報 1. はじめに QRコードの画像ファイルから内容を読み取る を作りました。 2. スクリーンショ …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …

e-Stat API を試しています。

最近、e-Stat 政府統計の総合窓口 というサイトの API機能 を試しています。 e-Stat というのは「政府統計のデータ」が閲覧できるサイトで、プログラムによってデータが取得できるように AP …

web development

Web Development for Beginners を読む:レッスン12, 13, 14

目次1. はじめに2. Lesson 12: Browser Extension Project Part 1: All about BrowsersIntroductionAbout the bro …

Web Programming

IntersectionObserver API を使ったテストページを作成しました

IntersectionObserver API を使ったテストページを作成しました。 IntersectionObserver API は、ウェブページ上のある要素が見える範囲 (viewport) …