フリーズやカクカクしない安定した動作のアプリやアドオン、ゲームなどが作れるJavaScriptライブラリ

Web を閲覧していると、突然 CPU 100% になったり
定期的に負荷がかかったりします。

flash などを除くと、それ以外のほとんどは JavaScript による重いループ処理が原因です。
少しずつ改善されてるような気はしますが
おそらくもう何年も前から、この問題がついてまわっていたのではないでしょうか。

そしてこのような負荷は、高スペックなマシンでは気付かないと思います。
開発者やテスターが高スペックな PC で動作確認を行ったことにより、
瞬間的な負荷を見過ごされたまま公開、リリースされてしまうこともあると思います。
それを、低スペックなマシンや iPhone などスマホを使っているユーザーが実行し
負荷に耐え切れずカクカクな描画になってしまったり、
最悪フリーズしてしまう場合もあります。

マシンの性能に限らず、例え高スペックマシンでも
いくつものアプリケーションを常時起動していて
タスクがいっぱいになっているユーザーもこのような事例に該当します。

何らかのアプリケーションを開発する場合、
処理の高速化は常に求められます。
より高速に動作したほうが軽快なのは確かです。

ですがクライアントアプリケーションを作る場合、
CPU 100% 使う処理を 10 秒も 20 秒も続けられてしまったら
それはもう不快でしかありません。
さらにそれが非ブロックでなく実行されてたら
マシンはもうフリーズのような動かない状態になりっぱなしです。

単純に高速を目指すのではなく、UI のことを考え制御を返すことが重要です。
UI を無視してひたすら高速に実行して 5 秒かかる処理だったら、
定期的に UI に制御を返し
例え数秒遅くなってもバックグラウンドで行い CPU 負荷を抑えることが
ユーザーへのストレス軽減として重要と考えています。

さらに非同期で実行することで並列化も可能になり、
逆に本来より速く実行できる可能性もあります。

PotLite.js は、そのような負荷軽減を可能とする JavaScript ライブラリです。
非同期処理をチェインで扱う Deferred オブジェクトを中心に
いろいろなループ処理を非同期で実行できるイテレータを実装しています。

イテレータは PotLite.js バージョン 1.21 現在、

forEach
repeat
forEver
iterate
items
zip
map
filter
reduce
every
some

が実装されています。
非同期での実行、同期での実行、そして Deferred チェイン上での実行が可能です。

そして、速度指定できるのが特徴の一つです。

Deferred.forEach(obj, function(value, key) {...})

上のコードが forEach (jQuery での jQuery.each のようなもの) の非同期での通常実行になり、

Deferred.forEach.slow(obj, function(value, key) {...})

上のように .slow と速度を明示することができます。
すると各ループをゆっくり目で実行します。

他にも .fast などの指定ができます。
関数内で return wait(1); 等と Pot.Deferred オブジェクトを返すことで
各ループ間でより細かな wait などの調整ができます。
逆に、非同期イテレートをより速く実行したい場合は
Pot.Defered.forEach.ninja(...) と、
最も速く実行するよう定義されている .ninja を指定すると
通常の for 文を単に関数で包んだのと同じくらいの速度で実行できます。

より詳しくはリファレンスを参照してください。

どれくらい変化があるかベンチマークをとってみました。

イテレータ

JSON ファイルサイズ

CPU 最大使用率

CPU 平均使用率

実行時間 (ms)

for 文

1MB

14.52%

10.61%

1211ms.

jQuery.each

1MB

16.28%

13.53%

1362ms.

Pot.Deferred.forEach

1MB

11.65%

5.53%

1647ms.

for 文

5MB

24.85%

21.71%

4717ms.

jQuery.each

5MB

27.78%

24.29%

5570ms.

Pot.Deferred.forEach

5MB

13.74%

8.61%

8925ms.

for 文

10MB

28.14%

25.92%

10699ms.

jQuery.each

10MB

31.09%

30.77%

15844ms.

Pot.Deferred.forEach

10MB

18.62%

9.77%

38909ms.

同期と非同期の根本的な違いがありますが
この結果は、下記のネストループを Core i3 で 5 回実行した平均結果です。
JSON ファイルは、はてなキーワード一覧から取得した CSV をキーワードだけの JSON に変換したものです。
10MB はキーワードすべて、5MB は半分で切った JSON ファイル、 1MB はそのまた半分です。

Pot.Deferred.forEach によるイテレータは、処理時間が他と比べ長くなっていますが
CPU 最大使用率、CPU 平均使用率共に安定しているのがわかります。

CPU グラフも比較してみました。
すべてのキーワードを対象に、Pot.Deferred.forEach (上) と、jQuery.each (下) をそれぞれ実行した結果です。

jQuery.each は、途中で「警告：応答しないスクリプト」のダイアログがでてしまいました。
そのため、本来なら Pot.Deferred.forEach のほうが時間がかかると予想してください。

それでも、Pot.Deferred.forEach では jQuery.each に比べ
瞬間的 (もしくは断続的) な負荷を抑えることができています。
これは、対象のデータがどれほど巨大でも
負荷のかからないイテレートが可能なことを示しています。

なお、上記のベンチマークは
ある程度負荷のかかるループ処理 を対象としています。
PotLite.js のイテレータは、各ループがある程度重いと判断すると CPU 負荷を抑えるよう働きます。
つまり、逆に言うと
瞬時に終わるような小中規模のループでは、他のループと変わらない速度で実行されるということです。

以下に、小規模のループ結果を記します。

イテレータ

CPU 最大使用率

CPU 平均使用率

実行時間 (ms)

for 文

4.10%

3.87%

9ms.

jQuery.each

5.54%

4.72%

18ms.

Pot.Deferred.forEach

4.71%

4.15%

19ms.

この結果は、1MB の JSON ファイルを対象にユニーク処理をなくした実行結果です。
上と同じく 5 回実行した結果の平均になります。

PotLite.js は、jQuery.each とほぼ同じ実行速度で、
ちょうど for 文を関数で包んだものを実行したのと同じくらいの速度で実行できています。

このような毎回の処理が小さなループでは、 for 文などが最も適していますが
適度に各関数を使うことでコストも減少させることができます。

以下は、テストの使用したソースコードです。

// jQuery.each
function benchmark_jQuery() {
  $.getJSON('hatena.keywords.json?callback=?', {
    size : '10mb'
  }, function(data) {
    var results = [];
    var start = +new Date;
    $.each(data.keywords, function(k, word) {
      if (!/[^a-zA-Z0-9_.-]/.test(word)) {
        var uniq = true;
        for (var i = 0; i < results.length; i++) {
          if (word === results[i]) {
            uniq = false;
            break;
          }
        }
        if (uniq) {
          results.push(word);
        }
      }
    });
    $('#result').text((+new Date) - start);
  });
}

巨大なファイルの転送と負荷のテストのため、ソースのみ記します。

// Pot.Deferred.forEach
function benchmark_potlite() {
  begin(function() {
    return jsonp('hatena.keywords.json?callback=?', {
      queryString : {
        size : '10mb'
      }
    }).then(function(res) {
      var results = [];
      var start = now();
      return Deferred.forEach(res.keywords, function(word) {
        if (!/[^a-zA-Z0-9_.-]/.test(word)) {
          var uniq = true;
          for (var i = 0; i < results.length; i++) {
            if (word === results[i]) {
              uniq = false;
              break;
            }
          }
          if (uniq) {
            results.push(word);
          }
        }
      }).then(function() {
        return now() - start;
      });
    }).then(function(time) {
      $('#result').text(time);
    });
  });
}

以下は、小規模のループとしてテストしたソースコードです。

// jQuery.each
function benchmark_jQuery_lite() {
  $.getJSON('hatena.keywords.json?callback=?', {
    size : '1mb'
  }, function(data) {
    var results = [];
    var start = +new Date;
    $.each(data.keywords, function(k, word) {
      if (!/[^a-zA-Z0-9_.-]/.test(word)) {
        results.push(word);
      }
    });
    $('#result').text((+new Date) - start);
  });
}

// Pot.Deferred.forEach
function benchmark_potlite_lite() {
  begin(function() {
    return jsonp('hatena.keywords.json?callback=?', {
      queryString : {
        size : '1mb'
      }
    }).then(function(res) {
      var results = [];
      var start = now();
      return Deferred.forEach(res.keywords, function(word) {
        if (!/[^a-zA-Z0-9_.-]/.test(word)) {
          results.push(word);
        }
      }).then(function() {
        return now() - start;
      });
    }).then(function(time) {
      $('#result').text(time);
    });
  });
}

PotLite.js

PotLite.js は、Pot.js の軽量バージョンです。非同期処理のオブジェクト/関数だけに絞ったライブラリです。経緯などは Pot.js に関する以前の記事を参照ください。

概要

PotLite.js は、非ブロックでの非同期処理を直列的に書けるようにし、 UI や CPU への負担を軽減するループ処理を中心に実装された JavaScript ライブラリです。 MochiKit ライクな Deferred オブジェクトにより様々なイテレート (forEach, filter, map, repeat, some など) を可能とします。 ※ここでいう MochiKit ライクとは、JSDeferred とは違い 1 つのチェインが 1 つのインスタンスということです。 ※Deferred チェインは JSDeferred や MochiKit.Async.Deferred と同じ感覚で扱えます。

ダウンロード

レポジトリ

$ git clone git://github.com/polygonplanet/Pot.js

GitHub : polygonplanet/Pot.js

動作環境

以下の Web ブラウザで動作確認済みです。

Mozilla Firefox *
Internet Explorer 6+
Safari *
Opera *
Google Chrome *

また、以下の環境でも動作するよう設計されています。

Greasemonkey (userscript)
Mozilla Firefox Add-On (on XUL)
Node.js
Other non-browser environment

インストール

一般的な方法で動作します。
例:

<script src="potlite.min.js" type="text/javascript">
</script>

Node.js の場合。

// Example to define Pot object on Node.js.
var Pot = require('./potlite.min.js');
Pot.debug(Pot.VERSION);

Pot.Deferred.begin(function() {
  Pot.debug('Hello Deferred!');
}).then(function() {
  // ...
});
// ...

Greasemonkey (userscript) の例。

// ==UserScript==
// ...
// @require  https://github.com/polygonplanet/Pot.js/raw/master/potlite.min.js
// ...
// ==/UserScript==
Pot.Deferred.begin(function() {
  return Pot.request('http://www.example.com/data.json').then(function(res) {
    return Pot.parseFromJSON(res.responseText);
  });
}).then(function(res) {
  Pot.debug(res);
  // do something...
});
//...

PotLite.js をバージョンを限定して Web から直接読み込みたい場合、上の GitHub リンクでは常に最新になってしまうため実装の差異による不具合が発生するかもしれません。そのため、API サーバを用意しました。

v1.21 : http://api.polygonpla.net/js/pot/potlite/1.21/potlite.min.js

これは、1.21 の部分をリリース済みのバージョンに合わせて変更できます。レポジトリに (例えば 1.22 と) バージョンをタグ付けした時に、あわせて API サーバに置くようにしています。例えば Greasemonkey で 1.21 を使いたい場合、

// ==UserScript==
// ...
// @require  http://api.polygonpla.net/js/pot/potlite/1.21/potlite.min.js
// ...
// ==/UserScript==

と記述できます。 Greasemonkey に限らず script タグからでもなんでも自由に使ってください。 ----
jQuery プラグインとしての例:

// jQuery を読み込んだ後に実行。
Pot.deferrizejQueryAjax();

// Ajax 系の関数が Pot.Deferred を返すようになる
$.getJSON('/hoge.json').then(function(data) {
  alert(data.results[0].text);
}).rescue(function(err) {
  alert('Error! ' + err);
}).ensure(function() {
  return someNextProcess();
});

// エフェクトなどを Deferred 化する 'deferred' が追加される
$('div#hoge').deferred('hide', 'slow').then(function() {
  // ( hide() が終了したあとの処理)
});

Pot.deferrizejQueryAjax() は現状、ライブラリ側で実行しません。なので、プラグインを使用する場合はコードの最初などで実行する必要があります。

リファレンス・マニュアル

より詳しい情報はすべてリファレンスに載っています。基本的な導入や、各メソッド・関数についても扱っています。

Pot.js + PotLite.js - ドキュメントリファレンス - JavaScript非同期処理ライブラリ

動作テスト

以下のページで動作テストができます。ページを開くと実装されている主な関数・メソッドを全てテストします。

Pot.js + PotLite.js - Test Run - JavaScript Async Library

自動生成されたドキュメント

JSDoc ドキュメント (PotLite.js)

Closure Compiler によりソースコードから自動生成されたドキュメントです。
殆どの関数ごとにサンプルコードを載せているので、ある程度は参考になると思います。生成物をすべて確認しているわけではないので、誤認識してる箇所もあるかもしれません。より詳細な実装などは直接ソースコードを参照ください。

久しぶりにちょっとがんばって重点をまとめてみました。これを機に、Pot.js (PotLite.js) で遊んでくれると嬉しいです。不明な点、要望やバグや感想などありましたら @polygon_planet や下のレポジトリから、またはメールでなんでもどぞです。

レポジトリ

polygonplanet/Pot.js - GitHub

圧縮電子どうのこうの

2011年11月5日