Zenn
Open7

WebAssembly on Browser/node.js を実用まで持っていくための雑記

WebAssembly
ピン留めされたアイテム
かめのこにょこにょこかめのこにょこにょこ

このスクラップのカバー範囲

  • WebAssembly の有効な使い方のヒントとなる情報

このスクラップのカバーしない範囲

  • WebAssembly の最適化
  • WebAssembly のデバッグ方法
  • WebAssembly のツールチェーンの紹介
  • WebAssembly の最新 proposal
かめのこにょこにょこかめのこにょこにょこ

Web API では提供されない機能の実装

  • JavaScript でも実装できるけれども、他言語から持ってきた方が素早く実装できるケース
    • JavaScript で実装した方がパフォーマンスが出る可能性 vs JavaScript に書き換えるコスト
  • WebAssembly の方がパフォーマンスが出る場合であれば WebAssembly を使う
    • JavaScript/WebAssembly 間のデータ受け渡しコストが十分に小さいことが前提
  • サーバ側で処理 & 結果をダウンロード という構成 vs ブラウザ側ですべて処理
    • ファイルのダウンロード/アップロードの負荷 vs ライブラリダウンロードの大きさ
    • クライアント側の CPU 負荷の許容範囲
      • モバイル CPU 相手だと有効なケースは非常に限られそう

具体例

  • ファイル圧縮/解凍

ライブラリ系列

  • OpenCV.js
  • FFMpeg.wasm

ゲーム制作系列

  • DxLib HTML5 版
  • OpenSiv3D for Web
かめのこにょこにょこかめのこにょこにょこ

WebAssembly でも JavaScript (Web API) でもできる処理

  • WebAssembly vs Native (WebAssembly vs JavaScript ではない) となるため、パフォーマンスとコードサイズにおいて、WebAssembly に軍配が上がることはない
  • WebAssembly で実装した方がいいケース
    • 同一動作を保証しやすい (ブラウザ間/クロスプラットフォーム対応)
    • 別の処理を WebAssembly で書いている
      • JavaScript/WebAssembly 間のデータ受け渡しコストが大きいため、JavaScript か WebAssembly に統一する必要がある
      • 重い部分だけ WebAssembly にするという方法は、データ受け渡しコストで帳消しされやすい
  • JavaScript (Web API) で書くと非同期 + WebAssembly だと非同期と相性が悪い
    • emscripten ASYNCIFY や Rust/C# の await/async でカバーできる

具体例

ほぼどのブラウザでも使える

  • 画像読み込み/書き出し(Canvas)
  • 文字レンダリング (ビットマップグリフの取得)
  • 音声読み込み
  • 暗号化/復号 (WebCrypto)
  • Base64 へのエンコード/デコード

Chrome に限られる

  • 文字レンダリング (ベクタグリフの取得)
  • 音声エンコード
かめのこにょこにょこかめのこにょこにょこ

WebAssembly の方が遅い 記事リスト

WASMのパフォーマンス最適化の勘所と使い所考察

  • 画像の RGBA 値を含む計算式の最大値を取得する
  • ArrayBuffer への読み書き速度の問題?
  • JavaScript で書いた処理 vs WebAssembly で書いた処理で、パフォーマンス & サイズにおいて JavaScript に軍配が上がった
    • JavaScript/WebAssembly 間のデータの受け渡しコストはこの点において無関係

WebAssembly で画像のリサイズ処理をやってみたら JavaScript + Canvas API より遅かった話

  • JavaScript/WebAssembly 間のデータの受け渡しコストが非常にボトルネックになる例
  • CanvasRenderingContext2D.drawImage と cv::resize/cv::imshow では後者が数倍程度早い

NodeのRSA鍵生成・署名・検証について速度比較してみた

かめのこにょこにょこかめのこにょこにょこ

ありそうな WebAssembly に対する要求

  • 既存の npm ライブラリを WebAssembly で再実装、依存関係を修正するだけでパフォーマンス UP できるくらいの便利よさ
  • 既存の TypeScript プロジェクトをそのまま WebAssembly にビルドできてry)
  • JavaScript 実装よりサイズが小さくなる
かめのこにょこにょこかめのこにょこにょこ

WebAssembly の方が速い 記事リスト

WebAssembly を動的生成した場合のパフォーマンスについて

  • Brainf**k のインタプリタ, JavaScript/WebAssembly への JIT
  • JavaScript/WebAssembly への JIT によって、JavaScript/WebAssembly のオプティマイザの恩恵を受けやすくなる？
  • JavaScript への JIT の仕方が改善できる可能性 + 差が縮まる or 逆転の余地がある
    • 単純に書き下したときに JavaScript より最適化の恩恵を受けやすいと見ることも