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. 安全で ポータブルな コンパイラターゲット
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/
32. ウェブブラウザ off-the-main-thread API 話 https://nhiroki.jp/2018/05/07/off-the-main-thread-api
33. CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
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)