Help us understand the problem. What is going on with this article?

JSLitmusを使ってJSのパフォーマンス測定をする

More than 5 years have passed since last update.

計測しないで推測ばかりしているアホの子だったから本腰いれて JavaScript のパフォーマンス測定環境について調べた。
結論として JSLitmus を使うとかなり簡単にできる。

使い方

  1. jslitmus.js をロードする
  2. JSLitmus.test の第二引数に測定したい関数を渡す
  3. #jslibmut_container エレメントを作る

簡単!

<!DOCTYPE html>
<html>
  <head>
    <script src='jslitmus.js'></script>
    <script src='sample.js'></script>
  </head>
  <body>
    <div id='jslitmus_container'></div>
  </body>
</html>
sample.js
// グローバル変数とローカル変数に対するアクセス速度の違いを測定する

var global_var = 1;
JSLitmus.test('global', function(count) {
  while (count--) { global_var++; }
});

JSLitmus.test('local', function(count) {
  var local_var = 1;
  while (count--) { local_var++; }
});

ここで第二引数に渡された関数の実行時に count というのが渡されてそれを while (count--) { … } としているが、これは JavaScript の関数呼び出しのコストを抑えるために行う作法のようなものなので基本的にこのフォーマットに従うのがよい。

実行してみる

先ほど作ったhtmlをブラウザで読み込む。すると以下のようになっているはず。

ここで Rub Tests ボタンを押すと何やら動き出して、しばらく経つと以下のようになる。

棒は実行できた回数を表すので長いほど速度が速い(沢山試行できた)ことを意味する。このことからグローバル変数へのアクセスよりローカル変数へのアクセスの方が(Chromeでは)4倍近く速いということが分かる。

Tips

自動実行する

デフォルトで Run Tests ボタンをクリックしないと計測が開始しない。これを読み込み完了と同時に実行するようにするには

window.onload = function() {
  JSLitmus.runAll();
};

とどっかに書いておけばOK.

複数ブラウザで同時実行

参考: JSのテストファイルを複数のブラウザで開いて手軽に確認する

おわりに

みんなでどんどん計測しよう!

yuku_t
FLYWHEEL社でソフトウェアエンジニアをしています。昔はIncrements社最初の従業員としてQiitaを開発したりCTOやったりしていました。
http://yuku.takahashi.coffee
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away