Upgrade to Pro — share decks privately, control downloads, hide ads and more …

festudy02-wasm

chikoski
December 15, 2020
930

 festudy02-wasm

chikoski

December 15, 2020
Tweet

Transcript

  1. #define WASM_EXPORT __attribute__((visibility("default"))) WASM_EXPORT int add(int a, int b) {

    return a + b; } #[no_mangle] pub extern "C" fn add(x: i32, y: i32) -> i32 { x + y } export function add(x: i32, y: i32): i32 { return x + y; }
  2. const stream = await fetch('some.wasm'); const buffer = await stream.arrayBuffer();

    const instance = WebAssembly.instantiate(buffer, {}); const value = instance.exports.add(1, 2);
  3. wasm-function[0]: sub rsp, 8 mov ecx, esi mov eax, ecx

    add eax, edi nop add rsp, 8 ret x86
  4. WebAssembly と • ソースコードをコンパイルして作るバイナリファイル • 使い方 ◦ WebAssembly.instantitate でインスタンス化する ◦

    WebAssemlby モジュールからエキスポートされた関数を JS から呼び出して実行する • 利用例 パターン:エコシステムとパフォーマンス
  5. Replacing a hot path in your app's JavaScript with WebAssembly

    https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
  6. Background Features in Google Meet, Powered by Web ML Tingbo

    Hou and Tyler Mullen, Software Engineers, Google Research
  7. • Wasm ファイル アセット 一種 ◦ 変更頻度が低いことが期待される ◦ キャッシュが有効 •

    ネイティブコードをキャッシュする ランタイムも多い • Tips ◦ URL を変えない ◦ ステータスコードを正しく返す ◦ Wasm ファイル サイズを小さくしすぎない キャッシュを上手に使おう x86 ARM
  8. ローディングを工夫しよう • LCP / FID へ影響を注意しよう • Tips ◦ 必要になるまでロードしない

    ◦ prefetch / Service Worker 利用も有効 ◦ base module + feature module ◦ コンパイル時 サイズ最適化 ▪ -Oz オプションをつける ▪ wasm-opt / twiggy などを利用する
  9. • CPU インテンシブな作業 パフォーマンス改善 期待できるが、 大きなパフォーマンス改善 約束されていない • 安定したパフォーマンスを期待できる。 •

    ロードパフォーマンスへ 影響 慎重な検討と対策が必要 • 他 言語 エコシステムを利用できる Wasm に期待できることと、できないこと