WebAssemblyブラウザサポートと検出

WebAssemblyサポートの検出方法、WASMモジュールの読み込み、ブラウザ互換性の理解。ストリーミングコンパイルと機能検出を解説。

Security

詳細な説明

WebAssembly検出

WebAssembly(Wasm)は、ブラウザでの計算集約型タスクにネイティブに近いパフォーマンスを可能にします。JavaScriptと並行してサンドボックス化された仮想マシンで実行されるバイナリ命令形式です。

検出

const hasWasm = typeof WebAssembly !== 'undefined'
  && typeof WebAssembly.instantiate === 'function';

ストリーミングコンパイル

モダンブラウザはWasmモジュールのダウンロード中にコンパイルするストリーミングコンパイルをサポートしています:

async function loadWasm(url) {
  if (WebAssembly.instantiateStreaming) {
    const { instance } = await WebAssembly.instantiateStreaming(
      fetch(url)
    );
    return instance;
  }
  // 古いブラウザ向けフォールバック
  const response = await fetch(url);
  const bytes = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(bytes);
  return instance;
}

機能ティア

機能 検出方法
基本Wasm typeof WebAssembly !== 'undefined'
ストリーミング WebAssembly.instantiateStreaming
スレッド WebAssembly.Memoryshared: true
SIMD SIMDテストモジュールのコンパイル
例外処理 try/catch付きテストモジュールのコンパイル

パフォーマンスの考慮事項

  • Wasmコードは通常ネイティブ速度の80-95%で実行されます
  • 初回ロードにはコンパイル時間が含まれます;以降のロードではキャッシュされたコンパイル済みモジュールを使用します
  • WasmとJavaScriptは相互に呼び出せますが、境界の越境にはオーバーヘッドがあります
  • 大きなWasmバイナリはストリーミングコンパイルと遅延ロードの恩恵を受けます

ユースケース

画像/動画処理(Photoshop web、Figma)、ゲームエンジン(Unity、Unreal)、暗号化操作、科学シミュレーション、既存のC/C++/RustコードベースのWebへの移植などの計算集約型アプリケーションに使用されます。

試してみる — Browser Feature Detector

フルツールを開く