プログラミング

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

Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する

目次1. Resource Timing API について2. サンプルコード3. PerformanceResourceTiming インターフェイス4. デモページ5. 参考仕様MDNブラウザの対 …

web development

Web Development for Beginners を読む:レッスン2

目次1. はじめに2. Lesson 2: Introduction to GitHubIntroductionCode managementWorking on projects with othe …

React Redux

React と Redux を使ったウェブページのサンプルその1

React と Redux を使ってウェブページのサンプルを作ってみました。以下のURLからアクセスすることがでます。 デモページ 🔗 React + Redux のサンプル002 こ …

Web Programming

アクセス元のグローバルIPアドレスが表示されるだけのWebページを作る (Content-Type を変えた2種類)(PHP利用)

目次1. はじめに2. 手順(HTMLバージョン)(1) ウェブサーバー上にディレクトリを用意します(2) index.php ファイルを作成します(3) この Webページにアクセスします3. 手順 …

JavaScript

WebSocket を使ったサンプルプログラムを作りました

目次1. はじめに2. スクリーンショット3. 動作4. 大まかな動作イメージ 1. はじめに WebSocket を使ったサンプルページを作りました。Node.js を使っています。 ソースコードは …