書いたこと
Wasm側からブラウザに対してどういった処理が行えるのかサンプルをいくつか作ったのでご紹介します。
Wasmは、C++やGoなど各種の言語から生成することが出来ます。
今回は、Rustを使ってWasmを生成しています。
図: Rustを使ったWasmの生成と実行の流れ
WebAssembly(Wasm)について
ブラウザのためのアセンブリ言語
WebAssembly(Wasm)の場合は、構文を解析する必要がなく、そのまま機械語にコンパイルすることが可能になっています。
それによってデスクトップ上のアプリケーションと同様にCPU上でコードを実行させることができます。
| JavaScript | Wasm | |
|---|---|---|
| 構文解析 | あり | なし |
| コードの実行 | インタプリタ上 (※1) | CPU上 |
(※1 Chrome(V8)は、最適化可能なJSコードであれば、2回目以降、機械語にコンパイルされ、Wasmと同様にCPU上で実行されます。）
作成したWebアプリケーション
- Wasm側からのアラートの表示
- フィボナッチ計算
- 画像のエッジ抽出
アラートの表示
フィボナッチ計算
画像のエッジ抽出
まとめ
Wasmを使うことで、画像処理やファイルのパースといった重たい処理を高速化するだけでなく、Wasm側からDOMを流し込むことも可能です。
ソースコード
アラートの表示
フィボナッチ計算
エッジ抽出