はじめに

Vue.js プロジェクトで Performance Timing API を使う方法についてメモ。

TL;DR

  • new Vue({performance: true}) とする
  • 計測は mark と measure を使う
  • 開発者モード および performance.mark API をサポートするブラウザでのみ動作
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. performance オプション
    2. 計測方法
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15
BuildVersion:	19A583

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls vue
vue@2.6.10 | MIT | deps: none | versions: 250

詳細

performance オプション

公式ページ に書かれている。

これを true に設定することで、ブラウザの開発者ツールのパフォーマンス/タイムライン機能で、コンポーネントの初期化やコンパイル、描画、パッチのパフォーマンス追跡することが可能になります。
この機能は、開発者モードおよび performance.mark API をサポートするブラウザでのみ動作します。

Vue インスタンス生成する際に、performance: true のオプションを渡すだけ。

1
2
3
4
5
6
7
8
9
10
 import Vue from "vue";
 import App from "./App.vue";
 
 Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App)
+  render: h => h(App),
+  performance: true,
 }).$mount("#app");

計測方法

処理の計測には mark と measure を使う。

1
2
3
4
5
6
7
8
9
10
// mark で計測ポイントを記録
performance.mark('start');
console.log('measuring...');
performance.mark('end');

// measure で指定ポイント間の差分を計測
//   結果ラベル、開始ラベル、終了ラベル を指定する
const result = performance.measure('fin', 'start', 'end');
console.log(result.duration);
// => 1234.5678... のように区間差分がミリ秒で返ってくる

まとめ

  • new Vue({performance: true}) とする
  • 計測は mark と measure を使う
  • 開発者モード および performance.mark API をサポートするブラウザでのみ動作

その他・メモ

制限事項(開発者モード および performance.mark API をサポートするブラウザでのみ動作)があるので、他の方法で計測する場合は下記を参照。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list