Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
festudy02-wasm
Search
chikoski
December 15, 2020
1
980
festudy02-wasm
chikoski
December 15, 2020
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
310
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
710
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.3k
20171002-wejs
chikoski
1
580
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
560
Design and Implementation of Tech Talks
chikoski
0
120
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
RailsConf 2023
tenderlove
30
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Transcript
Web フロントエンド パフォーマンスとWebAssembly 期待できることと、できないこと。 chikoski@ : WebAssembly Night organizer
• CPU インテンシブな作業 パフォーマンス改善 期待できるが、 めちゃくちゃ速くなるわけで ない • パフォーマンスグリッチ 起きにくくなることが期待される
• ロードパフォーマンスへ 影響 慎重な検討と対策が必要 TL; DR
chikoski@ • WebAssembly Night • We Are JavaScripters • Rust
LT • Rust Tokyo / Rust Fest Global
WebAssembly と
安全で ポータブルな コンパイラターゲット
None
http://webassembly.studio/
#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; }
Introduction of WebAssembly, https://rsms.me/wasm-intro
x86 ARM
const stream = await fetch('some.wasm'); const buffer = await stream.arrayBuffer();
const instance = WebAssembly.instantiate(buffer, {}); const value = instance.exports.add(1, 2);
wasm-function[0]: sub rsp, 8 mov ecx, esi mov eax, ecx
add eax, edi nop add rsp, 8 ret x86
エコシステム パフォーマンス
Sonic Boom! Audio Programming on Android and Chrome (Google I/O'19)
Zoom on Web: getting connected with advanced web technology, web.dev
LIVE
WebAssembly と • ソースコードをコンパイルして作るバイナリファイル • 使い方 ◦ WebAssembly.instantitate でインスタンス化する ◦
WebAssemlby モジュールからエキスポートされた関数を JS から呼び出して実行する • 利用例 パターン:エコシステムとパフォーマンス
WebAssembly とパフォーマンス
A Real-World WebAssembly Benchmark https://pspdfkit.com/blog/2018/a-real-world-webassembly-benchmark
Oxidizing Source Maps with Rust and WebAssembly https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/
Replacing a hot path in your app's JavaScript with WebAssembly
https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
パフォーマンスが安定していて、結果を予想しやすい
Webとパフォーマンス
ページロード プログラム実行 電力消費 ある処理 速さ。例:遅延、スループット、 frame per second ページ 読み込み
速さ。例: Largest Containtful Paint 消費される電力量
CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
Background Features in Google Meet, Powered by Web ML Tingbo
Hou and Tyler Mullen, Software Engineers, Google Research
パフォーマンス最適化 目的:UX 最大化
• UX に 、実行速度 改善 どれくらい貢献するんだろう? • メインスレッドをブロックしてないだろうか • 何に時間がかかっている
だろう? • やらなくて良い処理をやっていないだろうか? WebAssembly を使う前に
Core Web Vitals https://web.dev/vitals/
None
None
ウェブブラウザ off-the-main-thread API 話 https://nhiroki.jp/2018/05/07/off-the-main-thread-api
CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
None
None
None
None
最適化をする前に覚えておきたい技術 , Unite Tokyo 2017, 黒河 優介(ユニティ・テクノロジーズ・ジャパン合同会社 )
ロードパフォーマンスへ 影響を最小限にするために • キャッシュを上手に使おう • ロードを工夫しよう • ストリームコンパイルをしよう
• Wasm ファイル アセット 一種 ◦ 変更頻度が低いことが期待される ◦ キャッシュが有効 •
ネイティブコードをキャッシュする ランタイムも多い • Tips ◦ URL を変えない ◦ ステータスコードを正しく返す ◦ Wasm ファイル サイズを小さくしすぎない キャッシュを上手に使おう x86 ARM
ローディングを工夫しよう • LCP / FID へ影響を注意しよう • Tips ◦ 必要になるまでロードしない
◦ prefetch / Service Worker 利用も有効 ◦ base module + feature module ◦ コンパイル時 サイズ最適化 ▪ -Oz オプションをつける ▪ wasm-opt / twiggy などを利用する
• Wasm インスタンス化 ダウンロード 途中でも始められる • Tips ◦ WebAssembly.instantiateStreaming ◦
Content type を application/wasm に 設定する ストリームコンパイル
const response = fetch("some.wasm"); const instance = WebAssembly.instantiateStreaming(response, {}); const
value = instance.exports.add(1, 2);
まとめ
• CPU インテンシブな作業 パフォーマンス改善 期待できるが、 大きなパフォーマンス改善 約束されていない • 安定したパフォーマンスを期待できる。 •
ロードパフォーマンスへ 影響 慎重な検討と対策が必要 • 他 言語 エコシステムを利用できる Wasm に期待できることと、できないこと
https://squoosh.app/
Sonic Boom! Audio Programming on Android and Chrome (Google I/O'19)