festudy02-wasm

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)