いつの間にかJavaScriptにTypedArrayなるものが追加されていたので速度を比較してみました。今まで、array=new Array(1000)とかしていたのを、array=new Int32Array(1000)とするだけで使えます。

WebGL向けに開発されたということで、普通のArrayよりもパフォーマンスが向上するのでは?という期待感から計測してみました。

計測コードを実行する

一番高速なものを青、特別遅いものを赤で表記しています。単位はmsecです。

.

.

ArrayFloat32ArrayUint8ArrayInt16ArrayInt32Array

.

Chrome19確保047122243

.

変数書き込み251485858692

.

int定数書き込み3153515877

.

float定数書き込み397475257159

.

読み込み4448525994

.

Safari5確保030122445

.

変数書き込み720652820819823

.

int定数書き込み180645801783822

.

float定数書き込み136723103710201008

.

読み込み203896827821815

.

iOS5(NewIpad)確保025142169

.

変数書き込み40502094251324882489

.

int定数書き込み13422107257325562525

.

float定数書き込み8832099299730032978

.

読み込み11074053372237323440

.

Android4確保111101

.

変数書き込み9124701585658405901

.

int定数書き込み167110597659526007

.

float定数書き込み171107731172908430

.

読み込み340186879388489152

.

.



これを見て分かるのは以下の三点です。
・iOSは基本的にArrayを使うのがよい
・AndroidはFloat32Arrayを使うのがよい
・AndroidのIntArray系は50倍遅くて使い物にならない

PC系では以下の二点です。
・ChromeのIntArrayはそんなに悪くない
・SafariのIntArrayは4倍遅いぐらい

JavaScriptのボトルネックは間違いなくメモリアクセスの遅さで、ハッシュではないTypedArrayであれば劇的に高速になってもっと面白いことができるようになる!と思ったのですが、世の中そんなに甘くはありませんでした。速くなるどころか、普通に遅くなります。

iOSでは無難にArrayを使いましょう。特に画像フィルタのようにライトよりもリードの方が多いアプリの場合、4倍くらい速度差が出そうです。ちなみにCanvasのgetPixelDataメソッドの戻り値はUint8Arrayのようですので、場合によってはArrayに変換してもメリットが出るかもしれません。