performance.markとperformance.measureでパフォーマンスを計測する方法

この記事では『JavaScriptのパフォーマンスを計測する方法』について

performance.markとperformance.measureを用いてパフォーマンスを計測する方法
performance.markとは
performance.measureとは

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

performance.markとperformance.measureを用いてパフォーマンスを計測する方法

performance.markメソッドとperformance.measureメソッドを用いることで、JavaScriptのパフォーマンス(処理時間)を計測することができます。

JavaScriptのパフォーマンスを計測する手順を以下に示します。

パフォーマンスを計測する手順

performance.markメソッドを用いて、マークを作成する。
performance.measureメソッドを用いて、2つのマーク間の時間を測定する。
測定結果を取得する。

以下に、これらの手順を実装した簡単なプログラム例を示します。

// 「start」という名前のマークを作成
performance.mark('start');


// 測定対象の処理(今回は単純なfor文)
let total = 0;
for (let i = 0; i < 1000000; i++) {
    total++;
}
console.log('total: ' + total);


// 「end」という名前のマークを作成
performance.mark('end');


// 2つのマーク間の時間を測定
performance.measure(
    'processing time',      // 測定名
    'start',                // 測定開始のマーク名
    'end'                   // 測定終了のマーク名
);


// 測定結果を取得(「測定名」を用いて取得)
const results = performance.getEntriesByName('processing time')


// 測定結果の表示
console.log('processing time: ' + results[0].duration + '[ms]')

// ログ
// total: 1000000
// processing time: 6.335099995136261[ms]

上記のプログラムではまず、performance.markメソッドを用いてstartという名前のマークを作成します。このマークは測定開始点を示します。次に、測定対象となる処理を実行します。今回は、単純なforループを用いています。この処理の後に、performance.markメソッドを用いてendという名前のマークを作成します。このマークは測定終了点を示します。

次に、performance.measureメソッドを用いて、2つのマーク間の時間を測定します。performance.measureメソッドには、「測定名」「測定開始のマーク名」「測定終了のマーク名」を設定します。

最後に、performance.measureメソッドでの測定結果を取得します。測定結果の取得には様々な方法がありますが、ここでは、performance.getEntriesByNameメソッドを用いて測定結果を取得します。performance.getEntriesByNameメソッドの引数には、performance.measureメソッドで指定した「測定名」を入力します。

では次に、performance.markメソッドとperformance.measureメソッドについてもう少し詳しく説明します。

performance.markとは

performance.markメソッドはマークを作成し、それをパフォーマンスエントリとして保存するメソッドです。

performance.markメソッドの構文を以下に示します。

performance.markメソッドの構文

performance.mark(name)

引数name
- 作成するマークの名前を文字列型で指定します。

performance.markメソッドは、PerformanceMarkオブジェクトを作成します。PerformanceMarkオブジェクトは以下のようなプロパティを持っています。

PerformanceMarkオブジェクト

name
- マークの名前です。performance.markメソッドで設定した名前です。
entryType
- パフォーマンスエントリの種類です。performance.markメソッドの場合、「mark」になります。
startTime
- ページのナビゲーション開始(すなわちページロード)からの経過時間(ミリ秒)です。
- performance.markメソッドが呼び出された時点のタイムスタンプになります。
duration
- この種類のパフォーマンスエントリでは常に0です。
detail
- この種類のパフォーマンスエントリでは常にnullです。

PerformanceMarkオブジェクトはperformance.getEntriesByNameメソッドやperformance.getEntriesByTypeメソッドやperformance.getEntriesメソッドを用いて取得することができます。

performance.getEntriesByNameメソッドでPerformanceMarkオブジェクトを取得する

performance.getEntriesByName('start')と記述すれば、startという名前のマークのPerformanceMarkオブジェクトを取得します。言い換えると、PerformanceMarkオブジェクトのnameプロパティがstartであるものを全て取得します。

// 「start」と「end」という名前のマークを作成
performance.mark('start');
performance.mark('end');


// 「start」という名前のマークのPerformanceMarkオブジェクトを取得(取得するのはオブジェクトの配列)
let entries = performance.getEntriesByName('start');


// PerformanceMarkオブジェクトを表示(オブジェクトの配列)
console.log(entries);
// ログ
// [
//     PerformanceMark {
//         name: 'start',
//         entryType: 'mark',
//         startTime: 37.22970002889633,
//         duration: 0,
//         detail: null
//     }
// ]


// PerformanceMarkオブジェクト配列の0番目の要素を表示(オブジェクト)
console.log(entries[0]);
// ログ
// PerformanceMark {
//     name: 'start',
//     entryType: 'mark',
//     startTime: 37.22970002889633,
//     duration: 0,
//     detail: null
//   }

performance.getEntriesByTypeメソッドでPerformanceMarkオブジェクトを取得する

performance.getEntriesByType('mark')と記述すれば、performance.markメソッドで作成したPerformanceMarkオブジェクトを全て取得します。

// 「start」と「end」という名前のマークを作成
performance.mark('start');
performance.mark('end');


// PerformanceMarkオブジェクトを全て取得(取得するのはオブジェクトの配列)
let entries = performance.getEntriesByType('mark');


// PerformanceMarkオブジェクトを全て表示(オブジェクトの配列)
console.log(entries);
// ログ
// [
//     PerformanceMark {
//         name: 'start',
//         entryType: 'mark',
//         startTime: 39.00209999084473,
//         duration: 0,
//         detail: null
//     },
//     PerformanceMark {
//         name: 'end',
//         entryType: 'mark',
//         startTime: 39.135999977588654,
//         duration: 0,
//         detail: null
//     }
// ]


// PerformanceMarkオブジェクト配列の0番目の要素を表示(オブジェクト)
console.log(entries[0]);
// ログ
// PerformanceMark {
//     name: 'start',
//     entryType: 'mark',
//     startTime: 39.00209999084473,
//     duration: 0,
//     detail: null
//   }

performance.getEntriesメソッドでPerformanceMarkオブジェクトを取得する

performance.getEntries()と記述すれば、performance.markメソッドで作成したPerformanceMarkオブジェクトとperformance.measureメソッドで作成したPerformanceMeasureオブジェクトを全て取得します。

// 「start」と「end」という名前のマークを作成
performance.mark('start');
performance.mark('end');


// PerformanceMarkオブジェクトとPerformanceMeasureオブジェクトを全て取得(取得するのはオブジェクトの配列)
let entries = performance.getEntries();


// PerformanceMarkオブジェクトとPerformanceMeasureオブジェクトを全て表示(オブジェクトの配列)
console.log(entries);

// ログ
// [
//     PerformanceMark {
//         name: 'start',
//         entryType: 'mark',
//         startTime: 36.79409998655319,
//         duration: 0,
//         detail: null
//     },
//     PerformanceMark {
//         name: 'end',
//         entryType: 'mark',
//         startTime: 36.9297000169754,
//         duration: 0,
//         detail: null
//     }
// ]


// PerformanceMarkオブジェクトとPerformanceMeasureオブジェクトの配列の0番目の要素を表示(オブジェクト)
console.log(entries[0]);
// ログ
// PerformanceMark {
//     name: 'start',
//     entryType: 'mark',
//     startTime: 36.79409998655319,
//     duration: 0,
//     detail: null
//   }

performance.measureとは

performance.measureメソッドは2つのマーク間の時間を測定するメソッドです。

performance.measureメソッドの構文を以下に示します。

performance.measureメソッドの構文

performance.measure(measureName, startMark, endMark)

引数は全て文字列型です。
引数measureName
- 測定名を指定します。
引数startMark
- 作成したマーク名を指定します(省略可能)。
- performance.markメソッドで指定した名前と同じにする必要があります。
- 省略した場合、開始から現在までの経過時間が測定されます。
引数endMark
- 作成したマーク名を指定します(省略可能)。
- performance.markメソッドで指定した名前と同じにする必要があります。
- 省略した場合、引数startMarkから現在までの経過時間が測定されます。

performance.measureメソッドは、PerformanceMeasureオブジェクトを作成します。PerformanceMeasureオブジェクトは以下のようなプロパティを持っています。

PerformanceMeasureオブジェクト

name
- 測定名です。performance.measureメソッドで設定した名前です。
entryType
- パフォーマンスエントリの種類です。performance.measureメソッドの場合、「measure」になります。
startTime
- 「引数startMark.startTime」です(ミリ秒)。
- 引数startMarkが指定されなかった場合、ページのナビゲーション開始(すなわちページロード)からの経過時間(ミリ秒)になります。
duration
- 「引数endMark.startTime　- 引数startMark.startTime」です。引数endMarkが指定されなかった場合、引数startMark.startTimeから現在までの時間となります。
detail
- この種類のパフォーマンスエントリでは常にnullです。

PerformanceMeasureオブジェクトはperformance.getEntriesByNameメソッドやperformance.getEntriesByTypeメソッドやperformance.getEntriesメソッドを用いて取得することができます。

performance.getEntriesByNameメソッドでPerformanceMeasureオブジェクトを取得する

performance.getEntriesByName('startToEndTime')と記述すれば、startToEndTimeという名前の測定名のPerformanceMeasureオブジェクトを取得します。言い換えると、PerformanceMeasureオブジェクトのnameプロパティがstartToEndTimeであるものを全て取得します。

// 「start」と「end」と「subStart」と「subEnd」という名前のマークを作成
performance.mark('start');
performance.mark('end');
performance.mark('subStart');
performance.mark('subEnd');


// 「start」と「end」のマーク間の時間を測定する
performance.measure('startToEndTime', 'start', 'end');
// 「subStart」と「subEnd」のマーク間の時間を測定する
performance.measure('subStartTosubEndTime', 'subStart', 'subEnd');


// 「startToEndTime」という名前の測定名のPerformanceMeasureオブジェクトを取得(取得するのはオブジェクトの配列)
let entries = performance.getEntriesByName('startToEndTime');


// PerformanceMeasureオブジェクトを表示(オブジェクトの配列)
console.log(entries);
// ログ
// [
//     PerformanceMeasure {
//         name: 'startToEndTime',
//         entryType: 'measure',
//         startTime: 35.83770000934601,
//         duration: 0.1362999677658081,
//         detail: null
//     }
// ]

// PerformanceMeasureオブジェクト配列の0番目の要素を表示(オブジェクト)
console.log(entries[0]);
// ログ
// PerformanceMeasure {
//     name: 'startToEndTime',
//     entryType: 'measure',
//     startTime: 35.83770000934601,
//     duration: 0.1362999677658081,
//     detail: null
//   }

performance.getEntriesByTypeメソッドでPerformanceMeasureオブジェクトを取得する

performance.getEntriesByType('measure')と記述すれば、performance.measureメソッドで作成したPerformanceMeasureオブジェクトを全て取得します。

// 「start」と「end」と「subStart」と「subEnd」という名前のマークを作成
performance.mark('start');
performance.mark('end');
performance.mark('subStart');
performance.mark('subEnd');


// 「start」と「end」のマーク間の時間を測定する
performance.measure('startToEndTime', 'start', 'end');
// 「subStart」と「subEnd」のマーク間の時間を測定する
performance.measure('subStartTosubEndTime', 'subStart', 'subEnd');


// PerformanceMeasureオブジェクトを全て取得(取得するのはオブジェクトの配列)
let entries = performance.getEntriesByType('measure');


// PerformanceMeasureオブジェクトを全て表示(オブジェクトの配列)
console.log(entries);
// ログ
// [
//     PerformanceMeasure {
//         name: 'startToEndTime',
//         entryType: 'measure',
//         startTime: 37.3779000043869,
//         duration: 0.14169996976852417,
//         detail: null
//     },
//     PerformanceMeasure {
//         name: 'subStartTosubEndTime',
//         entryType: 'measure',
//         startTime: 37.52869999408722,
//         duration: 0.0034999847412109375,
//         detail: null
//     }
// ]


// PerformanceMeasureオブジェクト配列の0番目の要素を表示(オブジェクト)
console.log(entries[0]);
// ログ
// PerformanceMeasure {
//     name: 'startToEndTime',
//     entryType: 'measure',
//     startTime: 37.3779000043869,
//     duration: 0.14169996976852417,
//     detail: null
//   }

performance.getEntriesメソッドでPerformanceMeasureオブジェクトを取得する

// 「start」と「end」と「subStart」と「subEnd」という名前のマークを作成
performance.mark('start');
performance.mark('end');
performance.mark('subStart');
performance.mark('subEnd');


// 「start」と「end」のマーク間の時間を測定する
performance.measure('startToEndTime', 'start', 'end');
// 「subStart」と「subEnd」のマーク間の時間を測定する
performance.measure('subStartTosubEndTime', 'subStart', 'subEnd');


// PerformanceMarkオブジェクトとPerformanceMeasureオブジェクトを全てを取得(取得するのはオブジェクトの配列)
let entries = performance.getEntries();


// PerformanceMarkオブジェクトとPerformanceMeasureオブジェクトを全て表示(オブジェクトの配列)
console.log(entries);
// ログ
// [
//     PerformanceMark {
//         name: 'start',
//         entryType: 'mark',
//         startTime: 36.91990000009537,
//         duration: 0,
//         detail: null
//     },
//     PerformanceMeasure {
//         name: 'startToEndTime',
//         entryType: 'measure',
//         startTime: 36.91990000009537,
//         duration: 0.1395999789237976,
//         detail: null
//     },
//     PerformanceMark {
//         name: 'end',
//         entryType: 'mark',
//         startTime: 37.059499979019165,
//         duration: 0,
//         detail: null
//     },
//     PerformanceMark {
//         name: 'subStart',
//         entryType: 'mark',
//         startTime: 37.06839996576309,
//         duration: 0,
//         detail: null
//     },
//     PerformanceMeasure {
//         name: 'subStartTosubEndTime',
//         entryType: 'measure',
//         startTime: 37.06839996576309,
//         duration: 0.003300011157989502,
//         detail: null
//     },
//     PerformanceMark {
//         name: 'subEnd',
//         entryType: 'mark',
//         startTime: 37.07169997692108,
//         duration: 0,
//         detail: null
//     }
// ]


// PerformanceMarkオブジェクトとPerformanceMeasureオブジェクトの配列の0番目の要素を表示(オブジェクト)
console.log(entries[0]);
// ログ
// PerformanceMark {
//     name: 'start',
//     entryType: 'mark',
//     startTime: 36.91990000009537,
//     duration: 0,
//     detail: null
//   }

本記事のまとめ

この記事では『JavaScriptのパフォーマンスを計測する方法』について、以下の内容を説明しました。

performance.markとperformance.measureを用いてパフォーマンスを計測する方法
performance.markとは
performance.measureとは

お読み頂きありがとうございました。