パフォーマンスをモニタリングする「stats.js」を使う

Canvas（Pixi.js）でアニメーションを描画しているページにおいて、パフォーマンスをモニタリングしたくなったので「stats.js」を使ってみました。

「stats.js」とはFPS、レンダリングにかかった時間、使用メモリをリアルタイムで表示してくれるパフォーマンスモニタのライブラリです。
github.com

僕自身使ったことはないのですが、WebGLを使ったブラウザゲームなど重い処理が必要な開発においてよく見る気がします。公開されたのは2010年頃のようですが、パフォーマンスモニタのツールとしてはほぼデファクトスタンダードのポジションを獲得しているんじゃないでしょうか（想像）。

使い方

使い方はとてもシンプル。
まず、パッケージをインストールします。

npm install stats.js

使いたいコンポーネント、ページで読み込み、あとは初期化処理をすればOK。 `stats.showPanel(0)` で、表示モードを指定できます。今回はFPSが見たかったので `0` に設定。今回の例はNuxtでの使用例です。

import Stats from 'stats.js'

mounted() {
    this.setStats()
  },
  methods: {
    setStats() {
      const stats = new Stats()
      stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
      document.body.appendChild(stats.dom)
      stats.domElement.style.position = 'absolute'
      stats.domElement.style.top = '0px'
      stats.domElement.style.left = '0px'

      function animate() {
        stats.begin()
        // monitored code goes here
        stats.end()
        requestAnimationFrame(animate)
      }
      requestAnimationFrame(animate)
    }
  }

ブラウザで確認すると、ちゃんと指定通り表示されました。めでたし。

画面は見せられないのでアップで。