プログラミング

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 Components

Web Components: 組み込み要素を拡張する方法

目次1. はじめに2. 組み込みHTML要素を拡張する方法3. おわりに4. 参考 1. はじめに Web Components では、HTMLElement を継承してカスタムクラスを定義することも …

no image

プログラミングのコツ

随時、追加していきます。 目次 1. 関連する技術の仕様書や公式ドキュメントを読み込む 2. 機能のかたまり毎に、クラスやメソッドを分割する 3. ツールやアプリケーションはなるべくメイン機能だけを利 …

Web Programming

サーバーからブラウザを通じてデスクトップ通知する方法(Push API を利用)

Push API を使ってサーバーからブラウザにメッセージを送る方法について説明しています。

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …