⚙ デバイス情報
☰ ベンチマーク タスク
Task A
漁獲量ソート
50年×12月=600件の漁獲データをソート
待機中
Task B
人口集計
5,000件の人口レコードをフィルタ&集計
待機中
Task C
FFT解析
漁獲データの64点高速フーリエ変換
待機中
Task D
行列乗算
100×100行列乗算(空間解析シミュレーション)
待機中
通常JS
最適化JS
WebWorker
WASM (sim)
ブラウザだけでここまで高速処理できます
最新ブラウザのJavaScriptエンジンは驚くほど高速です。TypedArrayやWebWorkerを活用すれば、サーバーに送信せずともクライアントサイドで大量のデータ処理が可能。WebAssemblyを導入すればさらなる高速化が期待できます。
WebAssembly (WASM) とは
WebAssemblyはブラウザで実行できるバイナリ命令形式です。C/C++やRustなどからコンパイルでき、JavaScriptより低レベルで効率的な実行が可能です。数値計算・画像処理・暗号処理など、CPUバウンドな処理で特に威力を発揮します。なぜ速いのか
通常のJavaScriptは実行時にJIT(Just-In-Time)コンパイルされますが、型推論やガベージコレクションにオーバーヘッドがあります。WASMは事前にコンパイル済みのバイナリなので、これらのオーバーヘッドがなく、ネイティブに近い速度で動作します。最適化JSの工夫
Float64ArrayなどのTypedArrayを使うと、メモリレイアウトが連続的になりCPUキャッシュ効率が向上します。また、配列サイズの事前確保(pre-allocation)により、動的リサイズのコストを削減できます。
WebWorkerの役割
WebWorkerはメインスレッドとは別のスレッドで処理を実行します。UIがブロックされないため、重い計算中もユーザーインタフェースがスムーズに動作します。ただし、スレッド間のデータ転送(postMessage)にはシリアライゼーションコストが発生します。