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

festudy02-wasm

00580f6c11851d2fff0b3e2f7392226b?s=47 chikoski
December 15, 2020
680

 festudy02-wasm

00580f6c11851d2fff0b3e2f7392226b?s=128

chikoski

December 15, 2020
Tweet

Transcript

  1. Web フロントエンド パフォーマンスとWebAssembly 期待できることと、できないこと。 chikoski@ : WebAssembly Night organizer

  2. • CPU インテンシブな作業 パフォーマンス改善 期待できるが、 めちゃくちゃ速くなるわけで ない • パフォーマンスグリッチ 起きにくくなることが期待される

    • ロードパフォーマンスへ 影響 慎重な検討と対策が必要 TL; DR
  3. chikoski@ • WebAssembly Night • We Are JavaScripters • Rust

    LT • Rust Tokyo / Rust Fest Global
  4. WebAssembly と

  5. 安全で ポータブルな コンパイラターゲット

  6. None
  7. http://webassembly.studio/

  8. #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; }
  9. Introduction of WebAssembly, https://rsms.me/wasm-intro

  10. x86 ARM

  11. const stream = await fetch('some.wasm'); const buffer = await stream.arrayBuffer();

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

    add eax, edi nop add rsp, 8 ret x86
  13. エコシステム パフォーマンス

  14. Sonic Boom! Audio Programming on Android and Chrome (Google I/O'19)

  15. Zoom on Web: getting connected with advanced web technology, web.dev

    LIVE
  16. WebAssembly と • ソースコードをコンパイルして作るバイナリファイル • 使い方 ◦ WebAssembly.instantitate でインスタンス化する ◦

    WebAssemlby モジュールからエキスポートされた関数を JS から呼び出して実行する • 利用例 パターン:エコシステムとパフォーマンス
  17. WebAssembly とパフォーマンス

  18. A Real-World WebAssembly Benchmark https://pspdfkit.com/blog/2018/a-real-world-webassembly-benchmark

  19. Oxidizing Source Maps with Rust and WebAssembly https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/

  20. Replacing a hot path in your app's JavaScript with WebAssembly

    https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
  21. パフォーマンスが安定していて、結果を予想しやすい

  22. Webとパフォーマンス

  23. ページロード プログラム実行 電力消費 ある処理 速さ。例:遅延、スループット、 frame per second ページ 読み込み

    速さ。例: Largest Containtful Paint 消費される電力量
  24. CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる

  25. CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる

  26. Background Features in Google Meet, Powered by Web ML Tingbo

    Hou and Tyler Mullen, Software Engineers, Google Research
  27. パフォーマンス最適化 目的:UX 最大化

  28. • UX に 、実行速度 改善 どれくらい貢献するんだろう? • メインスレッドをブロックしてないだろうか • 何に時間がかかっている

    だろう? • やらなくて良い処理をやっていないだろうか? WebAssembly を使う前に
  29. Core Web Vitals https://web.dev/vitals/

  30. None
  31. None
  32. ウェブブラウザ off-the-main-thread API 話 https://nhiroki.jp/2018/05/07/off-the-main-thread-api

  33. CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる

  34. None
  35. None
  36. None
  37. None
  38. 最適化をする前に覚えておきたい技術 , Unite Tokyo 2017, 黒河 優介(ユニティ・テクノロジーズ・ジャパン合同会社 )

  39. ロードパフォーマンスへ 影響を最小限にするために • キャッシュを上手に使おう • ロードを工夫しよう • ストリームコンパイルをしよう

  40. • Wasm ファイル アセット 一種 ◦ 変更頻度が低いことが期待される ◦ キャッシュが有効 •

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

    ◦ prefetch / Service Worker 利用も有効 ◦ base module + feature module ◦ コンパイル時 サイズ最適化 ▪ -Oz オプションをつける ▪ wasm-opt / twiggy などを利用する
  42. • Wasm インスタンス化 ダウンロード 途中でも始められる • Tips ◦ WebAssembly.instantiateStreaming ◦

    Content type を application/wasm に 設定する ストリームコンパイル
  43. const response = fetch("some.wasm"); const instance = WebAssembly.instantiateStreaming(response, {}); const

    value = instance.exports.add(1, 2);
  44. まとめ

  45. • CPU インテンシブな作業 パフォーマンス改善 期待できるが、 大きなパフォーマンス改善 約束されていない • 安定したパフォーマンスを期待できる。 •

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

  47. Sonic Boom! Audio Programming on Android and Chrome (Google I/O'19)